javascript - 从 JS 文件中获取 Vue

标签 javascript npm webpack vue.js web-frontend

我对现代前端开发工具还很陌生。 我安装了 Nodejs 和 NPM。下载了一些包(es:“jquery”)并且一切正常。然后我安装了 Webpack(第 2 版),我创建了这个演示配置文件

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

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

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

一切正常。 当我选择 Vue 时,问题就出现了。我安装了

npm install vue --save

然后使用它

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

我不知道如何导入然后使用构造函数。我写的分明不可能是对的!事实上我得到了这个错误

TypeError: Vue is not a constructor

我错过了什么? (注意:我没有使用任何其他工具,只使用 Nodejs + NPM + Webpack2,如果可能的话,我想继续只使用这三个工具。)

谢谢, 马可

最佳答案

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

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

或者你可以使用 webpack 支持的导入语法。等效的导入是:

import Vue from 'vue';

关于javascript - 从 JS 文件中获取 Vue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42808261/

相关文章:

javascript - BootstrapToggle 有条件地切换状态

javascript - 如何使用CSS在顶部导航栏上添加后退按钮?

macos - 在 Mac OS X Lion 上安装 npm@1.1.1 时出错

Webpack-dev-server 不生成源映射

vue.js - 使用 Webpacker 从 Rails 5 中的子路径提供 Vue.js 应用程序

javascript - 当属性值为某物时如何隐藏数据属性

javascript - 我们可以在没有表单的情况下使用 Angular 输入验证吗

node.js - 以 Angular 创建新项目时出错

npm安装错误在phantomjs@1.9.12安装脚本处失败

javascript - 如何在 Vue 文件中包含 Assets 文件夹?