Vue-Cli搭建的详细过程

搭建开发脚手架：有助于快速搭建Vue项目，并且脚手架自带的许多Vue插件能帮助我们快速高效的开发项目
npmmirror 中国镜像站

一.安装node.js

通过安装包安装时，会自带npm的环境

二.安装cnpm和yarn

npm:
npm是node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
缺点：

1. 使用npm安装插件：命令提示符执行npm install npm
   install的时候巨慢，特别是新项目要等老半天，删除node_modules,重新install的时候还是很慢

2. 同一个项目，安装的时候无法保持一致性，由于package.json文件中版本号的特点，不同的版本在安装的时候代表不同的含义

   "5.0.3" "~5.0.3" "^5.0.3"

   “5.0.3"表示安装指定的5.0.3版本，”~5.0.3“表示安装5.0.X中的最新版本，”^5.0.3"表示安装5.X.X中最新的版本。因此常常会出现同一个项目，有的同事版本ok，有的同事版本不一致出现bug。

   npm其实也可以实现处处使用相同版本的packages，但需要开发者执行npm shrinkwrap命令。这个命令会生成一个锁定文件，在执行npm install的时候，该锁定文件会先被读取，和yarn读取yarn.lock文件一个道理。不同的点是，yarn会默认生成锁定文件，npm要通过 npmshrinkwrap命令生成npm-shrinkwrap.json文件，只有当这个文件存在时，packages版本信息才会被记录和更新。

3. 安装的时候，包会在同一时间下载和安装，中途有包抛出错误，npm会继续下载和安装包。因此npm会把所有的日志输出到终端，有关错误包的错误信息会淹没在一大堆npm打印的警告中，你甚至永远注意不到实际发生的错误

cnpm和yarn
cnpm和yarn是用来替代npm的包管理工具，因为npm的服务器在国外，受网络影响大，可能出现异常。

yarn的优点：

1. 速度快，yarn可以并行安装，同步执行所有的任务，并且有离线模式，对于安装过的软件包，再次安装时，可以从缓存中获取 cnpm安装：
2. 安装版本统一，yarn有一个锁定文件（lock file）记录了被确切安装上的模块的版本号。每次只要新增一个模块，yarn就会创建（更新）yarn lock这个文件，保证每一次拉取同一个项目依赖时，使用的都是一样的模块版本。
3. 更简洁的输出，npm的输出信息冗余，在执行npm
   install时，命令行里会打印出所有安装上的依赖。yarn相比之下就简洁很多，结合emoji直观且直接地打印出必要的信息，也提供一些命令供开发者查询额外的安装信息。
4. 多注册来源处理，所有的依赖包，无论被不同的库间接关联引用多少次，安装这个包的时候，只会从一个注册来源去安装，要么时npm，要么是bower，防止出现混乱不一致。
5. 更好的语义化，语义更清晰

$ npm install -g cnpm --registry=淘宝镜像地址*

cnpm-v检查是否安装成功
cnpm安装模块:

$ cnpm install [name]*

同步模块：直接通过sync命令马上同步一个模块，只有cnpm命令行才有这功能

$ cnpm sync express*

还可以直接通过web方式同步：/sync/express

$ open https://npmmirror.com/sync/express

三.安装vue-cli脚手架构建工具

vue-cli 提供官方命令行工具，可用于快速搭建大型单页应用
输入命令，全局安装vue脚手架：

$cnpm install -g @vue/cli

验证是否安装成功：

vue -V

看到@vue/cli版本号的输出，则安装成功

四.创建项目

vue create 项目名称

项目名称有限制，中间可以使用中划线和下划线，但不可以有大写字母，大写字母会报错

五.启动项目