Question

我尝试使用快递/把手实施Vue Single File Components。根据那个页面，我去了＆amp;安装Webpack（然后是Babel）。

表面上看，Webpack正在运作：

webpack built 770ca5c82f424a41909d in 285ms
Hash: 770ca5c82f424a41909d
Version: webpack 1.14.0
Time: 285ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.84 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 428 bytes [rendered]
    [0] ./public/client.js 428 bytes {0} [built]
webpack: bundle is now VALID.

这是我的index.html

<html>
<head>
    <title>writing.io</title>

    <script src="public/bundle.js"></script>
</head>

<body>
    <script>
    import Vue from 'vue';
    import Home from './Home.vue';
    import Game from './Game.vue';

    new Vue({
        el: '#app',
        render: h => h(Home)
    })
    ...

我在unexpected token import上获得import Vue from 'vue';（＆＃34;应该＆＃34;现在与Babel合作）。

尝试用var Vue = require('Vue').Vue替换该行，但后来require无法识别。

我错过了什么？

Answer 1

首先，我不能在您的webpack文件中看到vue-loader，因此请考虑将其添加为加载器，因为当您想要使用单个文件组件时需要它。

var path = require('path');

module.exports = {
  entry: './public/client.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/public'
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.vue$/, loader: 'vue' }
    ]
  }
};

另外请确保您已通过npm / yarn在您的应用中安装了vue-loader。

最后确保安装了VueJS

使用Babel

1 个答案: