总结梳理:webpack中如何使用vue

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实例要控制的区域

你可能感兴趣的:(总结梳理:webpack中如何使用vue)