1.安装vue包,cnpm i vue -s 生产环境
2.由于webpack中,使用.vue组件模板文件定义组件,需要安装能解析这种文件的loader
cnpm i vue-loader vue-template-complier -D 开发环境
cnpm i vue-loader-plugin -S vue-loader@15版本之后必须配置依赖插件
3.webpack.config.js中进行配置:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins:[
new VueLoaderPlugin()
],
module:{
rules:[
{ test:/.vue$/, use:'vue-loader'}
]
}
4.在main.js中导入Vue模块 import Vue from 'vue' 只提供了runtime-only 的方式
5.定义一个.vue组件,三部分组成:template script style
6.导入组件 import login from './login.vue'
7.创建VM实例 var vm = new Vue({el:'#app},render:c=>c(login))
8.在index.html页面中创建一个id为app 的div容器,作为vm实例要控制的区域
发表评论