前言（日常废话）

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

正文

一、前期准备工作

node.js的10.0.0以上版本(必须)、cnpm(淘宝镜像)(可选)、vue-cli4以上版本(必须)
这一趴主要是介绍在创建vue-cli项目的一些前置环境，如果电脑上已经装有上述条件可跳过，如果没有可按下列步骤一步一步来。

1.1、node.js(10.0.0以上版本)

看官大大们可以在这个地址：node的下载链接 选择自己电脑的版本进行相对应的下载，然后傻瓜式下一步即可。安装完成之后
在命令行输入：node -v 即可查看当前电脑的node版本号
在命令行输入：npm -v 即可查看下载node时自动下载的npm的版本号

1.2、vue-cli(4.x版本)

下载完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/cli@4.4.6

1.3、cnpm(淘宝镜像)

使用npm进行下载操作时，由于是从果歪的服务器进行下载操作，所以有时会因为网络因素导致插件下载失败，因此MY大大的TB团队就弄了这个造福种花家程序员的cnpm。装这个主要是为了在进行一些插件下载操作的时候会快些，看个人选择，可装可不装。
安装：在安装完node可以使用node的npm包管理工具了，我们就可以在命令行工具里输入：
npm install cnpm -g --registry=https://registry.npm.taobao.org
然后回车等待安装完成即可，安装完成以后可以输入 cnpm -v，来进行当前cnpm版本号的查看。

二、项目创建

2.1在项目文件夹进入命令行

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

2.2项目创建

然后在命令行输入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	以用户的角度进行代码测试（看个人习惯与需求选择）

我根据写的这个demo选择了Babel、Router、Vuex这三项，选择完后按下回车键：

因为选择了Router，所以要进行进一步选择：是否使用history模式，因为history模式需要后端支持，所以我选择了否继续使用原来的哈希模式，按下n然后回车Enter：

这个选项的意思是选择将babel、Eslint、etc等配置文件放在哪里？
In dedicated config files => 一个专门的配置文件（选择了这项，在项目生成时会生成一个单独的新的配置文件）
In package.json => 放在package.json中 （选择了这项，就直接放在了package.json中）

我这里选择了下面的 In package.json 回车：

这一行询问的是，是否将刚刚设置的一串配置保存下来，如果保存了，在下一次创建项目就会有这个选项出来，我这选择的是不保存，n、Enter。进入项目的创建。等待。。。

可以看到提示成功创建了项目 ‘项目名称’
还有两个提示：
cd ‘项目名称’ =>进入项目文件
npm run serve =>（进入项目文件后）运行项目
至此，整个基于vue-cli的4.x版本命令行创建的项目算是成功结束了[撒花]！！！

写给看贴的你

本人见识短浅，如有错误地方请指正批评；如有涉及侵权，请多多包涵，联系本人，看见即删（手动狗头保命）。
祝各位看官大佬们身体健康、诸事顺心、仙运荣昌、少写bug多加薪…