vue-cli安装与配置webpack

本文章适合初学者学习，如有错请提出。近期对vue比较感兴趣，所以准备用vue写一个blog。早期先对vue脚手架了解一下，对于新手官网建议先不用vue-cli，但我觉得如果没有任何的依据凭自己写一个项目（包括webpack的配置等）这无疑是浪费时间的而且都最后还是是而非的。所以我觉得完全可以用脚手架建一个webpack项目，然后我们可以具体对应它生成的文件学习（当然这只是我的学习方法，我认为这样比较好学，但不一定人人都是这样的）。

在学习的过程中发现网上许多的简介都已经过期（vue发展的过快了吧。。。。），所以我结合自己的项目和网上的资料备注一下，希望和其他的人一起讨论。这个适合的版本为：nodejs(6.10.2)、vue(2.5.2)、vue-router(3.0.1)和webpack(3.6.0)的。适合的环境为windows的，其他的系统我也不知道可不可以用。

一、vue-cli安装与配置webpack

1、默认电脑已经安装了node，不会的请百度然后先安装nodejs。

2、安装好nodejs之后，全局安装vue-cli：npm install -g vue-cli。

3、新建webpack项目：vue init webpack projectname(这是比较完整的，我们学习用这个比较好)、vue init webpack-simple projectname(简易版的)。

注意：projectname项目名不能用中文。

4、“vue init webpack-simple projectname”创建新项目的目录结构：

生成新项目时并没有安装依赖，需要进入新的项目安装依赖：cd projectname -> npm install。

新建项目时，会需要填一些东西，但如果你都不想填也无所谓，全部默认、全部yes都行：

(1)、Project name:——项目名称
(2)、Project description:——项目描述
(3)、Author:——作者
(4)、Vue build:——构建模式，一般默认选择第一种
(5)、Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
(6)、Use ESLint to lint your code?:——eslint的格式验证非常严格，多一个空格少一个空格都会报错。个人觉得如果是平时练习的话可以选yes因为这个可以规范自己js代码的书写规范。但在实际开发项目中不建议使用，会影响开发效率。
(7)、Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装。

“vue init webpack projectname”创建新项目的目录结构：

二、build目录下配置文件之check-versions.js

这个文件并不是十分重要，只要稍微了解就行了。

三、build目录下配置文件之utils.js

这个文件主要用于处理有关于css方面的，主要对后面vue-loader.conf.js文件有关系，对webpack配置loaders方面也有影响。

四、build目录下配置文件之webpack.base.conf.js

从这个文件开始，webpack配置文件正式开始，前面的相当于是这个文件参数般的存在。而实际上这个也不是正式会运行的配置文件。一个项目有2中情况：开发环境和生成环境。这2中环境一些方面的配置是不一样的，比如在生产环境我们会对js和css进行压缩以减少宽带。这个文件实际上是这2中环境通用的配置。下面的webpack.dev.conf.js文件（开发环境）、

webpack.prod.conf.js（生产环境），这2个文件才是实际环境运行使用的配置文件。

五、build目录下配置文件之webpack.dev.conf.js

webpack.prod.conf.js也差不多。这2者之间的差别以后再讨论。

六、config目录下之index.js

这个文件配置了一些全局属性，分别dev和build用于区别开发环境和生产环境不同的地方。

七、总结

在vue2.5.2中取消了build目录中的dev-server.js和dev-client.js文件，改用webpack.dev.conf.js代替，所以 配置本地访问在webpack.dev.conf.js里配置即可。具体如何配置以后运用到时候具体了解，本文章就不讲了。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

小程序开发分享页面后返回首页

Vue的UI组件库自定义动态组件

以上就是vue-cli安装与配置webpack的详细内容，更多请关注Gxl网其它相关文章！