利用vue-cli搭建webpack

发布时间：2020-07-10


. 项目环境搭建：
1.安装node (node -v查看node版本 2.全局安装vue-cli Npm install -g vue-cli Vue:查看是否安装成功 Vue list：查看可用的模板
3.创建一个基于 "webpack" 模板的新项目
Vue init webpack project-name(默认安装2.0版本 Vue init webpack#1.0 project-name(安装1.0版本 脚手架工具如下：

.
-build中配置了webpack的基本配置、开发环境配置、生产环境配置等
-config中配置了路径端口值等


. -node_modules为依赖的模块
-src放置组件和入口文件
-static放置静态资源文件
-index.html文件入口 webpack中的一些解释
new HtmlWebpackPlugin 这个插件的作用是把output输出的文件自动插入到html里
1.cd project-name 2.Npm install 3.Npm run dev 4.在浏览器输入localhost:8080 效果如下：

. 因为使用了stylus语法，安装完stylus-loader后依然报错，是因为npm 3+ 会报错，所以还需手动安装stylus。 问题一：安装stylus-loader遇到的问题：


.


.
解决方法：npm i sytlus --save --dev
成功解决！ 问题二：


. vue-router应用于组件内时的矛盾


解决方法：如果遇到此问题，将VueRouter的引用放在App的引用下面，需App.vue先编译完成



成功解决 问题三：
因为项目中使用了字体图标，路径也没有问题别人那里也不报错但是我这里编译后总是报错：

. 后来终于解决了：

之前是想直接引用index.styl文件，但是编译报错，后来发现这样引用问题成功解决


利用vue-cli搭建webpack

推荐内容

相关推荐