webpack搭配vue框架使用

很多童鞋可能都接触过 vue-cli创建的vue脚手架项目 虽然用着很方便但很多人却不知道其中怎么引入的,为什么@符号就能代表src文件 今天我就来总结下 我之前的经验 也算是复习一下

在引入vue之前 我们得现有一个具有基础功能的webpack  这个我之前有讲过的

先安装所需要的依赖包

npm  i    

vue   // vue的框架文件

vue-loader   // vue的加载器   这个也是webpack解析 vue文件需要的

vue-style-loader   // 解析vue文件中的 样式

vue-template-compiler    // 这个是编译vue文件  

vue--html-loader    // 编译 模板中的html文件

-D    //最后  这个不要忘了  不写这个  安装完之后可能不会出现在 package.json 依赖包的名称

2.下一步 在 src文件中 创建一个App.vue文件  同时创建一个components文件

在 index.js文件中  引入 vue框架

import Vue from "vue";  //引入vue框架  这里注意下 原来应该是  vue/dist/vue.esm.js   //这个才是 vue在webpack中使用的框架文件
import App from './App.vue'

let vm=new Vue({
    el:"#root",
    data:{},
    template:'',
    components:{
        App
    }
})

3.配置修改 webpack.config.js文件

const VueLoaderPlugin=require('vue-loader/lib/plugin');   // 引入vue-loader的插件 没有这个 vue加载会失败的

在plugins:[] 中引入进去

plugins:[
        new VueLoaderPlugin()   //使用 vue插件
    ]

// 添加vue文件的样式加载处理器

          {
                    test:/\.css$/i,
                    use:['vue-style-loader','css-loader',{       //  将css解析完之后 交给 vue-style-loader 加载器进行处理
                        loader:'postcss-loader',
                        options:{
                            plugins:[require('autoprefixer')]
                        }
                    }]
                },

// 添加处理vue文件 的loader

 {
                    test:/\.vue$/i,
                    use:['vue-loader']
   }

最后起别名  在webpack.config.js文件  导出的对象底部 添加

resolve:{
            alias:{
                'vue':'vue/dist/vue.esm',  // 更改vue文件的引入路径 直接写 import  Vue from "vue"  他是找的vue.js 没有这个文件会报错
                '@':path.resolve(__dirname,'./src/js/components')    //文件路径起别名   @  代表  src文件下的js的components文件
            }
        }

4.最后npm运行 代表成功了  （其实吧 各种依赖包并不是你不配置他就不使用了，模块之间他会自己在文件中查找自己需要的依赖,找不到他就会报错 ，所以有些东西虽然没有配置但还是需要安装的）

最后 武汉加油 祝愿这次疫情早点过去