需要来自JS文件的Vue [英] Require Vue from JS file

问题描述

我对现代前端开发工具很陌生。
我安装了Nodejs和NPM。下载了一些软件包（es：jquery），一切正常。然后我安装了Webpack（第2节），我创建了这个演示配置文件

i'm pretty new to modern frontend development tools. I installed Nodejs and NPM. Downloaded some packages (es: "jquery") and everything worked. Then I installed Webpack (vers. 2), I created this demo config file

module.exports = {
   entry: "./entry.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   }
};

在我的JS入口点（entry.js）我可以成功使用jQuery模块，如下所示

In my JS entry point (entry.js) I can successfully use jQuery module, as follows

var $ = require("jquery");
$('#test').html('Changed!');

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

Everything works fine. The problem arises when I go for Vue. I install it

npm install vue --save

然后使用它

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

我不知道如何导入然后使用构造函数。我写的清楚不可能是对的！实际上我收到此错误

I don't know how to import and then use the constructor. What I wrote clearly cannot be right! In fact I get this error

TypeError: Vue is not a constructor

我缺少什么？
（注意：我没有使用任何其他工具，只有Nodejs + NPM + Webpack2，我想继续使用这三个，如果可能的话）。

What am I missing? (NOTE: I am not using any other tool, only Nodejs + NPM + Webpack2 and I would like to keep going using only these three, if possibile).

谢谢，
Marco

Thank you, Marco

推荐答案

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

Vue provides an ES module that is used by webpack. The constructor you expected is the default export, but require works a little differently so you need to access the default property on the import.

var Vue = require('vue').default;

或者您可以使用webpack支持的导入语法。等价的导入是：

Or you can use the import syntax which is supported by webpack. The equivalent import is:

import Vue from 'vue';

这篇关于需要来自JS文件的Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！