需要JS文件中的Vue

use*_*958 6 javascript web-frontend npm webpack vue.js

我是现代前端开发工具的新手。我安装了Nodejs和NPM。下载了一些软件包(例如:“ jquery”),一切正常。然后我安装了Webpack(第2版),创建了这个演示配置文件

module.exports = {
   entry: "./entry.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   }
};
Run Code Online (Sandbox Code Playgroud)

在我的JS入口点(entry.js)中,我可以成功使用jQuery模块,如下所示

var $ = require("jquery");
$('#test').html('Changed!');
Run Code Online (Sandbox Code Playgroud)

一切正常。我去Vue时会出现问题。我安装

npm install vue --save
Run Code Online (Sandbox Code Playgroud)

然后用

var Vue = require("vue");
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
Run Code Online (Sandbox Code Playgroud)

我不知道如何导入,然后使用构造函数。我写的清楚是不对的!实际上我得到这个错误

TypeError: Vue is not a constructor
Run Code Online (Sandbox Code Playgroud)

我想念什么?(注意:我不使用任何其他工具,仅使用Nodejs + NPM + Webpack2,并且如果可能的话,我想继续仅使用这三个工具)。

谢谢Marco

Mic*_*ngo 7

Vue提供了webpack使用的ES模块。您期望的构造函数是默认的导出,但require工作方式略有不同,因此您需要访问default导入上的属性。

var Vue = require('vue').default;
Run Code Online (Sandbox Code Playgroud)

或者,您可以使用webpack支持的导入语法。等效导入为:

import Vue from 'vue';
Run Code Online (Sandbox Code Playgroud)