步骤一:安装Vue并在index.js文件中引入
npm install vue --save
运行时依赖,所以不加-dev
import Vue from 'vue'
步骤二:将webpack打包的版本调整为runtime-compiler版本
在webpack.config.js中
步骤三:进行vue封装
- 在 .vue文件中写我们的template
- 需要的地方用 import 引入 import App from './src/vue/App.vue'
装上编译vue文件的loader
npm install vue-loader vue-template-compiler --save-dev
版本参考
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.5.21",
安装完loader记得配置webpack.config.js环境
可以正常使用啦,其他的正常js里需要挂载的别忘记了,还要再html 文件里有id=app的div
几点小tips
- vue文件的template只能写一个root标签
- tempalte里的data记得写成函数形式
- 如果再引入文件时不想写后缀,webpack.config.js中参考配置文件