vue-cli的4.x版本命令行创建项目（node.js下载、cnpm安装）

vue

因为之前用的一直是vue-cli的2.9.6版本，这段时间将电脑上的2.x版本给卸了，装上了4.4.6版本。害，脑子不好使，总是记不住，好记性不如烂笔头，搁这儿做一下记录，见下：

一、前期准备工作

node.js的10.0.0以上版本(必须)、cnpm(淘宝镜像)(可选)、vue-cli4以上版本(必须)

这一趴主要是介绍在创建vue-cli项目的一些前置环境，如果电脑上已经装有上述条件可跳过，如果没有可按下列步骤一步一步来。

看官大大们可以在这个地址：node的下载链接选择自己电脑的版本进行相对应的下载，然后傻瓜式下一步即可。安装完成之后

在命令行输入：node -v 即可查看当前电脑的node版本号

在命令行输入：npm -v 即可查看下载node时自动下载的npm的版本号

下载完node，就可以用node提供的npm来下载我们的主角vue-cli了。

如果你不确定自己的电脑是否安装有vue-cli，可以在命令行中输入vue -V来进行查看，如果版本已经是4.x的了，这一步就可以跳过了。如果版本不是4.x，但是想用4.x的话，

可以在命令行输入：npm uninstall -g vue-cli进行当前vue-cli的卸载。

然后在命令行输入：npm install -g @vue/cli进行vue-cli最新版本的安装。

如果想安装指定版本的vue-cli只需在最新版本安装的命令后面加上@版本号即可，举例：npm install -g @vue/[email protected]

使用npm进行下载操作时，由于是从果歪的服务器进行下载操作，所以有时会因为网络因素导致插件下载失败，因此MY大大的TB团队就弄了这个造福种花家程序员的cnpm。装这个主要是为了在进行一些插件下载操作的时候会快些，看个人选择，可装可不装。

安装：在安装完node可以使用node的npm包管理工具了，我们就可以在命令行工具里输入：
npm install cnpm -g --registry=https://registry.npm.taobao.org

然后回车等待安装完成即可，安装完成以后可以输入 cnpm -v，来进行当前cnpm版本号的查看。

这里项目的创建选择的不是vue的可视化项目创建，而是传统的命令行创建，所以我们首先要进入到项目将要存在的文件夹命令行。

通过win+R，然后输入cmd，再一层一层cd进入文件夹的方式太慢了。这里有一个方法可以直接进入，那就是在预备创建项目文件的文件夹的地址栏输入cmd，就可以进入到处于该路径的命令行工具进行操作了，这个技巧相信会看到这个帖子的大大肯定是知道了，就当听我说了个废话。。。

然后在命令行输入vue create 项目名称，下图中的命令名称为“vuex-demo2”

接着按下回车，耐心等待项目的创建即可，创建完毕后，会显示如下界面，让我们选择已有配置方案，下图配置方案有三种，第一个是什么都不配置，第二个是默认的配置了babel和eslint，第三个是进行手动配置

我在这里选择第三个手动配置Manually…然后回车，出现下图

上面一共有九项，我们可以通过键盘上下键来进行切换，通过空格键进行选中与取消选中，确认选择完毕后，按回车下一步，接下来对着九项逐个介绍。

选项	说明
Babel	主要作用是将代码中的ES6以及更高的语法兼容至浏览器可读取的ES5（建议选择）
TypeScript	TS 是 JS 的超集，扩展了 JS 的语法，使得JS代码编写更加的规范…选择后会有进一步的选择（看项目要求选择）
Progressive Web App (PWA) Support	一个渐进式网络应用程序（看个人习惯与需求选择）
Router	Vue的路由功能，选择后会有进一步选择（看项目需求选择）
Vuex	Vue的状态管理（如果项目偏大些，建议选择）
CSS Pre-processors	CSS的预编译，选择后会有进一步的选择（看个人习惯与需求选择）
Linter / Formatter	这个是代码检验和格式检查（看个人习惯与需求选择）
Unit Testing	以开发的角度进行代码测试（看个人习惯与需求选择）
E2E Testing	以用户的角度进行代码测试（看个人习惯与需求选择）