vue+webpack构建项目过程

项目环境搭建：

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文件，但是编译报错，后来发现这样引用问题成功解决