VUE工程搭建（一）：使用vue-cli构建项目

序

我也装模作样写篇序。

本文是关于vue的（你多半也是搜索vue才看到这篇文章的），但是本文的重点不在vue,在“工程”二字。本文会涉及到大大小小很多知识，包括vue.js\vue-cli\vuex\webpack\axios\element UI\sass\pug等等等等，但是本文不打算详解任何一门技术，因为已经有很多官方和非官方的文档，比我解释得清楚得多，我不打算再造轮子。

希望你没有因为上面那句话关掉这篇文章。

我经常看到有所谓的"文章"，直接把官方文档复制或者翻译一段过来，简直比大张伟写歌还简单。我不打算干这样的事情，毕竟《野狼disco》已经被告了。

很明显本文是面向新手的，但是本文不如何写代码，本文讲如何做工程。我记得我最初学web时，我看了html的语法，我看了ccss的语法，我看了js的语法，然后又看了vue的语法。看完了，然后如何做出一个网站来呢？我估计很多人和我一样，一片茫然（莫非只有我？我相信得有人看了《Java编程思想》之后能马上做好一个正经的spring项目）。从知识到工程，还需要一步过渡的，这就是本文存在的意义。

前端工程犹如一棵参天大树，大量的细枝末节晃花了初学者的双眼。本文打算梳理出这棵大树的主要枝干，然后由你自己去达到那些枝叶。

如果刚刚有人对你说：“去用vue做一个xxx出来”，而你不知道怎么下手，那么本文应该适合你。

你可能会经常在我的文章里面看到废话（比如上面这一段），yeah，that's my style。

将这一系列文章，献给那位最重要的读者--自己。我自己经常记不住以前的知识，所以干脆写文章记录下来，给将来的自己看。

从vue-cli开始

构建一个vue项目，最方便快捷的方式是使用vue-cli。

vue-cli是一个脚手架工具，具体介绍见ve-cli介绍，下面我们使用vue-cli来构建一个vue项目。

安装node

首先去node.js官网下载并安装node，vue-cli要求node最低版本为8.9。

我由于要维护多个项目，要使用不同的版本的node，推荐使用nvm(windows系统使用nvm-windows)，可以在同一台电脑上快速切换node版本。

装好node后，打开命令行，使用node -v命令，验证安装。我使用的是10.3.0版本。

image

安装vue-cli

打开命令行，使用以下命令安装vue-cli

npm i -g @vue/cli

说明：

i 是 install的简写
-g代表全局安装（若非全局安装，则只安装到当前目录下）

使用vue --version或者vue -V(V大写)来验证安装。我使用的是4.1.2版本。

image

安装cnpm

有可能你会觉得npm安装速度太慢，有可能你看着install的进度条一直没有完成，掏出手机来打了两把王者，然后发现还没install完，那么可以使用淘宝的npm镜像cnpm来加速。

使用以下命令：

npm i -g cnpm --registry=https://registry.npm.taobao.org

安装好cnpm后，用cnpm替代npm命令，如npm i -g @vue/cli写成cnpm i -g @vue/cli即可，作用完全一样，但是所安装的模块去淘宝的镜像上面拉取，速度会快很多。

本文之后还是使用npm命令。

创建项目

切换到要创建项目的目录，使用以下命令：

vue create hello-vue

说明：

create后的'hello-vue'为项目名称，该命令会在当前目录下面创建hello-vue文件夹。
项目名需小写。

出现以下画面，选择preset。

image

所谓preset，就是一套配置集，第一个选项为默认preset，我们选择第二个选项Manually select features，手动选择自己所需要的配置。

image

接下来大致解释一下各项：

babel

粗略地说，babel是一个js语言的“翻译器”。

让我们从1995年的那个周末说起。

很久很久以前，浏览器中并不能执行任何逻辑，它真的就是用来“浏览”，所有的逻辑操作，需要把数据发送到后端，后端执行了操作再把结果返回给前端。如果要计算“中国足球前锋以2米/秒的速度奔跑，接到队友1米/秒的速度传球，本来想停球但是形成了5米/秒速度的射门，问此时看台第14排18号座位球迷的心理阴影有多大”这种复杂的逻辑，由后端来计算是合理的。但是仅仅是计算1+1=2这种简单逻辑，也把数据发给后端来计算，就不太合理了，何况当时上网费是很贵的。

对互联网发展史做出重大的贡献的网景公司(Netscape)，很快就发现了这一点，他们想让在浏览器也执行一点逻辑，一些简单的逻辑就不麻烦后端大爷了，在浏览器中植入一门轻量语言，来执行简单的逻辑。Brendan Eich受命来发明这门语言，传说他只用了一个周末（也有说是10天），就设计出了这门语言--LiveScript，如果你没有听说过LiveScript，那是很正常的，因为它很快就改名了。当时Java正当红，红得发紫，为了蹭Java的热度，网景公司将LiveScript--这门和Java毫无关系的语言--改名为了JavaScript。

时至今日，当初和微软进行浏览器大战、雄姿英发、气吞山河的网景公司，早已被历史的车轮碾碎，但是JavaScript这门语言，却顽强生存了下来，而且在后端语言百花齐放的今天，JavaScript牢牢垄断了前端（甚至还把手伸到了后端）。作为web界最重要的语言之一，JavaScript本身是一个周末就被设计出来的“玩具语言”，它的能力逐渐跟不上它的责任。所以人们不断优化，设计了ECMAScript标准，不断强化JavaScript的能力。

ECMAScript，是JavaScript的实现标准。1997年发布了1.0版本后，ECMAScript不断更新，2015年，发布了重要版本--es2015，也被称之为es6。es6为JavaScript升级了多项重要功能，极大提高了前端工程的能力和效率。

但是程序员高高兴兴地用上了es6之，模板字符串、let、for of等用得飞起，然后尴尬的事情发生了，我认识for (let item of list)，但是浏览器不认识for (let item of list)这种新语法（如果你不认识for (let item of list),那你得学一下es6了）。

终于，在说了这么多废话之后，babel出场了，我认识es6，浏览器不认识es6，但是我认识babel，babel认识es6，babel也认识浏览器，babel就将es6的新语法翻译成浏览器看得懂的老语法，比如将for (let item of list)翻译为for (var _i = 0, _list = list; _i < _list.length; _i++)，这样，我可以高高兴兴地用新语法，而不用担心浏览器不认识新语法。

总而言之，babel是一个js语言的“翻译器”，它很重要，一定要勾选上它。

Typescript

可能有新同学会问，Typescript是什么？那么，让我们再次回到1995年的那个周末，js被设计出来了，但是随着它责任越大，能力显得不够了，尤其是和主流的c++\java等语言相比，js是弱类型语言，它没有类型系统，让习惯了面向对象编程的程序猿非常不适应。于是有人为js的添加了类型系统，并加上了一些其他能力，设计出了js语言的超集--Typescript。

如果你认真看了上面这段文字，那么说明你不知道什么是Typescript，那么就不要勾选它。

Progressive Web App (PWA) Support

PWA是近些年出现的一个概念：渐进式web程序，简单地说，我不太懂，也没研究过，不要勾选它。

Router

Router是路由器，用来做前端路由的。那么前端路由是什么？我用一个不太恰当的例子来说明一下：

比如有一个网站www.abc.com,它有pageA和pageB两个页面。我们在浏览器的地址栏输入www.abc.com/pageA时，abc.com这个网站的服务器，把pageA页面的文件（比如一个html文件）返回给了浏览器，然后浏览器渲染了这个文件，将页面呈现了出来。然后我们再访问www.abc.com/pageB，服务器又把pageB页面的文件返回给了浏览器。而我们用vue做出来的网站是单页应用(spa, single-page-application)，什么是单页应用呢？当我们访问abc.com时，服务器把整个站点(pageA和pageB)都返回给了浏览器，然后如果我们访问的是/pageA，就把pageA呈现出来，如果我们访问/pageB，就把pageB呈现出来。

总结一下，传统的非单页应用，根据不同的路径，服务器返回不同页面的文件，这个路由的过程发生在后端。而单页应用，服务器一开始就把整个站点返回到前端了，访问不同的路径，并不再向后端发起请求，前端根据不同的路径来呈现不同的页面，这个路由的过程发生在前端。而这里的Router，就是来完成前端路由工作的。

(当然，上面的说法并不绝对准备，如果是多入口程序或者使用了懒加载，那么切换路径时还是会向后端发起请求。)

Router很重要，一定要选上。

Vuex

Vuex是vue程序的状态管理器。vue是组件化的，一个程序由多个组件构成，每个组件有各自的状态。但是各个组件并不是相对独立的，当组件A的状态发生改变时，可能会通知组件B，让组件B也改变状。vue本身有多种组件间通信的方式，当程序比较简单时，采用一些简单的组件通信，就可以实现状态维护。但是随着程序变大，组件越来越多，组件间的状态维护会变得复杂，组件间的通信难以管理，这时候就需要一个专门的状态管理器，也就是Vuex啦，所以，勾选上它吧。

CSS Pre-processors

CSS预处理器。和js一样，css也责任很大能力很小，所以人们设计了各种增强化版的css，主流的有sass\less\postcss等等，sass和less都差不多，是对css的语法强化，包括嵌套、变量等，这个postcss，有点不一样，它本质上是一个平台，可以自由安装各种插件来强化css，两年前我刚开始接触前端时，看到说是未来的css预处理器的会被postcss统一，我也用了下，确实非常强大且灵活，但是强大且灵活的代价是：更多的学习成本、更多的程序维护成本。两年过去了，似乎postcss也没有一统天下。对于能handle住postcss的，尽情拿postcss玩出花吧。对于初学者，先用sass\less吧。

CSS Pre-processors要选上。

Linter / Formatter

这个Linter，实在是不好翻译，我看有的文章称其为“去毛器”，感觉怪怪的。Linter是个好东西，它是一系列代码规范，然后在我们写代码时，进行规范检查，比如规定了js代码结尾不准写分号，那么如果代码中写了分号，Linter会提示你。是否勾选Linter，看个人喜好吧，理论上当然是有Linter更好，但是有些人会被Linter烦得不行，开了Linter之后又关掉。