webpack中使用Vue需要注意的一些问题和报错

在最新学习webpack过程中遇到了很多问题 一下记录一下报错和解决方案

1.安装Vue

npm i vue -S

2.在main.js文件中引入包

import Vue from ‘vue’

需要注意的点：

1. 查找项目有没有node_modules>vue>package.json,查找有没有main属性  修改指向
2. 直接在main.js中修改路径 

   ../node_modules/vue/dist/vue.js

3. 依旧保持import vue from 'vue' 然后在config.js中增加配置项

   resolve: {
       alias: { // 修改 Vue 被导入时候的包的路径
          "vue$": "vue/dist/vue.js"
       }
     }

3.安装好以上们可以创建vue模板

var vm = new Vue({
    el:'#app',
    data:{
        msg:"123"
    }
})

这个时候我们运行

npm run dev

我们会发现开始报错 报错内容大致是编译失败 需要loader 我们在给配置需要的loader

npm i vue-loader vue-template-compiler -S

到此 vue正常显示在页面中

3.当我们在页面导如组件时 问题来了 

Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

　　

解决方法：

需要在config.js文件中

const VueLoaderPlugin = require('vue-loader/lib/plugin');

然后在组件项new一下

new VueLoaderPlugin(),

参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
. Vue-loader在 15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的