1. 安装vue的包 cnpm i vue -S
2. 由于在webpack中,推荐使用 .vue这个组件模板文件定义的组件,所以,需要安装,
能解析这个文件的loader: cnpm i vue-loader vue-template-complier -D ,
注意:
若vue-loader是@15.x 版本,有些东西必须要配置。
打开webpack的配置文件 webpack.config.js:
const { VueLoaderPlugin } = require("vue-loader");
然后还在此文件中配置 plugins 节点
plugins: [new VueLoaderPlugin()],
3. 在main.js 中,导入 vue 模块 import Vue from 'vue'
4. src下定义一个 .vue 结尾的组件,其中,组件有三部分组成 :template script style
5. 在main.js使用 import login form './login.vue'导入这个组件
6. 在main.js创建vm的实例并配置render(渲染组件)函数的属性 var vm = new Vue({el:'#app'},render:c=>c(login))
7. 在页面中创建一个 id 为 app的div 元素,作为我们vm实例要控制的区域