webpack搭配vue框架使用
很多童鞋可能都接触过 vue-cli创建的vue脚手架项目 虽然用着很方便但很多人却不知道其中怎么引入的,为什么@符号就能代表src文件 今天我就来总结下 我之前的经验 也算是复习一下
在引入vue之前 我们得现有一个具有基础功能的 这个我之前有讲过的
先安装所需要的依赖包
npm i vue // vue的框架文件vue-loader // vue的加载器 这个也是webpack解析 vue文件需要的vue-style-loader // 解析vue文件中的 样式vue-template-compiler // 这个是编译vue文件 vue--html-loader // 编译 模板中的html文件-D //最后 这个不要忘了 不写这个 安装完之后可能不会出现在 .json 依赖包的名称
2.下一步 在 src文件中 创建一个App.vue文件 同时创建一个文件
{{a}}+{{b}}={{a+b}}在 index.js文件中 引入 vue框架
Vue from "vue"; //引入vue框架 这里注意下 原来应该是 vue/dist/vue.esm.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:'1ebdb7179b5b8bc180aea447537ecf69
3.配置修改 ..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运行 代表成功了 （其实吧 各种依赖包并不是你不配置他就不使用了，模块之间他会自己在文件中查找自己需要的依赖,找不到他就会报错 ，所以有些东西虽然没有配置但还是需要安装的）
最后 武汉加油 祝愿这次疫情早点过去
