Node.js webpack中导入vue的三种方法

在webpack 中使用 Vue：
安装 vue 模块 npm i vue -S
注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式；

第一种导入方法：

找项目根目录中的node_modules 的文件夹
在 node_modules 中根据包名，找对应的 vue 文件夹
在 vue 文件夹中，找一个叫做 package.json 的包配置文件
在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
修改main属性入口，把 "main": "dist/vue.runtime.common.js", 修改成 "main": "dist/vue.js",即可。

第二种导入方法：

在项目的main.js文件中直接引入vue所在的路径
import Vue from '../node_modules/vue/dist/vue.js'

第三种导入方法：

main.js文件

import Vue from 'vue' // 调用 vue 模块修改webpack.config.js配置文件使导入的模块指向vue文件var vm = new Vue({el: '#app',data: {msg: 'vvcat'}
})

webpack.config.js配置文件

var path = require('path')var htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'),filename: 'bundle.js' },plugins: [ new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), filename: 'index.html' })],module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的 第三方 loader 规则]},resolve: {alias: { // 修改 Vue 被导入时候的包的路径"vue$": "vue/dist/vue.js"}}
}

在webpack.config.js配置文件中通过 resolve 修改 Vue 被导入时候的包的路径。

Node.js webpack中导入vue的三种方法相关推荐

js之删除对象属性的三种方法判断对象中是否有某一属性的四种方法
js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...
html 如何给图片打标签,图文详解HTML页面中添加图片的三种方法
在页面布局时,经常需要在页面中插入图片,那你知道如何在HTML中添加图片吗?这篇文章就给大家介绍HTML页面中插入图片的三种方法,感兴趣的朋友可以参考一下,希望对你有所帮助. 方法一.用HTML中的i ...
在JavaScript中重复字符串的三种方法
In this article, I'll explain how to solve freeCodeCamp's "Repeat a string repeat a string" ...
在JavaScript中反转字符串的三种方法
This article is based on Free Code Camp Basic Algorithm Scripting "Reverse a String" 本文基于F ...
mysql添加临时索引_mysql 中添加索引的三种方法
在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以通过不同的应用场景来进行索引的新建,在此列出三种新建索引的方法 mysql 中添加索引的三种方法 1.1 新建表中添加索 ...
centos 卸载软件_一篇看懂!详解-Linux系统中安装软件的三种方法
Linux系统中安装软件的三种方法注:本文主要以CentOS为例介绍常用的安装方式,其他版本linux在文章底部 Linux系统中怎么安装软件,首先说一下应用程序与系统命令的区别: 1.文件位置系 ...
js获取DIV的位置坐标的三种方法！
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...
c++语言定义排序函数,关于C++中定义比较函数的三种方法小结
C++编程优与Pascal的原因之一是C++中存在STL(标准模板库).STL存在很多有用的方法. C++模板库中的许多方法都需要相关参数有序,例如Sort().显然,如果你想对一个集合进行排序,你必 ...
java 终止方法_Java中终止线程的三种方法
Java中终止线程的三种方法 Thread.stop, Thread.suspend, Thread.resume 和Runtime.runFinalizersOnExit 这些终止线程运行的方法已经 ...