默认webpack无法打包 .vue 文件,需要安装相关的loader
cnpm i vue-loader vue-template-compiler -D
在webpack配置文件中,新增loader配置项
{test:/\.vue$/,use:'vue-loader'}
在webpack中,如果想要通过vue,把一个组件放到页面中去展示,vm实例中的render函数可以实现
简写方式如下
总结梳理:webpack 中如何使用vue
1. 安装vue的包
cnpm i vue -S
2.由于在webpack中,推荐使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件loader
cnpm i vue-loader vue-template-compiler -D
3. 在main.js中导入vue模块
import Vue from 'vue'
4. 定义一个 .vue结尾的组件 其中 组件有三部分组成 :template script style
5. 使用import导入这个组件
6. 创建vm的实例
var vm = new Vue({el:'#app',render:c=>c(login)})
7. 在页面中创建一个id 为app的div元素,作为我们vm实例要控制的区域