webpack如何使用vue

1.安装vue的包:  cnpm i vue -S

2.在main.js中导入包

3.运行起来报错

3.1第一种解决办法:

3.2第二种解决办法:

让我们先回顾一下包的查找规则:

//1.找项目根目录中有没有node_modules的文件夹
//2.在node_modules中根据包名,找对应的vue文件夹
//3.在vue文件夹中,找一个叫做package.json的包配置文件
//4.在package.json文件中,查找一个main属性[main属性制定了这个包在被加载时候的入口文件]

在package.json文件中,main对应的文件为“dist/vue.runtime.common.js”。直接修改文件为“dist/vue.js”即可

3.3第三种解决方法:

在main.js中依然使用"import Vue from 'vue'",在webpack.config.js中配置规则

4.在runtime-only下如何才能正确的导入vue呢?

4.1在src目录下创建login.vue模板

默认webpack无法打包.vue文件,需要安装相关的loader

"cnpm i vue-loader vue-template-compiler -D"

在配置文件中新增loader配置项{test:/\.vue$/,use:'vue-loader'}

启动项目报错

解决方法:Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用:
在webpack.config.js添加以下的代码,即可
// webpack.config.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

module.exports = {

plugins: [
new VueLoaderPlugin()
]
}

猜你喜欢

转载自www.cnblogs.com/webenjoy/p/12044495.html