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()
]
}