[前言]学习流程：理解环境-安装环境-新建项目-运行项目-代码实现。
学习 vue，使用 vue，先安装 vue。进入vue官网，官网会先提示我们学习它的几种安装方法：
一、下载引入到 html/vue 文件，最基础的是从官网下载的 vue.js 文件引入。
二、CDN引入到 html/vue 文件，使用 CDN 引用官网提供的网上公开的 vue.js 文件链接(直接网络读取文件缓存，免于手动下载)。
三、使用 npm 命令直接安装整个 vue 的开发环境（包括运行环境）。
这篇文章主要从头开始讲解安装 vue 环境经历的过程和原理，如安装 node 的必要性和原理，理解到 node 的 npm ，拓展讲解与 npm 相似的 yarn 。还有当我们创建新项目或者继续新项目的时候该怎么做，会一步一步的贴上相应的命令代码。
1.1、原理 - 为什么安装 vue 环境 ？
学vue，想要运行 vue 项目和代码，就必须得安装 vue 运行环境。如果你使用了某些工具，安装插件后直接一键就可以跑起 vue 项目代码或者直接可以新建vue项目，其实是这个工具它在背后已经替你安装了 vue 的环境如 Hbuider 。所以，我们学习 vue ，就得学会手动给它搭建它的底层运行环境，暂时不借用其他一键运行工具，而本文将讲如何手动搭建原始底层环境。
1.2、原理 - 什么是vueCLI（脚手架）？
安装 vue 环境只是为了运行需要，而我们搭项目需要安装的是 vueCLi 脚手架，但这个阶段的我们还不明白什么是 Cli 脚手架，脚手架顾名思义相当于搭建大楼时，我们会打地基和房梁，然后在大楼外层搭上固定的脚手架后工人才能站上去根据图纸施工。也就是说，安装 vueCli 脚手架相当于把 vue 项目的官方给出的标准结构给搭建到电脑/项目上来，而这个标准结构包括了文件夹目录和文件夹目录里的一些必要文件。
1.3、原理 - 官网说的npm是什么意思？
搭建安装环境，使用官网说的 npm ，也就是本文开头的第三点，但是初学者会疑惑，什么是 npm ？ npm 就是 nodejs 下的一个工具，是一个 JavaScript 包管理工具，npm 是Nodejs 能够如此成功的主要原因之一。而我们要使用npm，就必须得安装nodejs。
1.4、原理 - 如何安装Node/npm？
官网地址：Node.js，安装时根据默认提示点击下一步安装，除了安装路径不需要其他改动。安装完node后，我们可以看到新安装的快捷菜单有如图三个项，如图1-4-1：
【图1-4-1】
我们都习惯了使用电脑系统本身的命令提示符工具，而安装完 node 后，多出来的这三个有什么意义？根据思维逻辑，我们这时候要使用 npm 命令，应该是从这个 Node.js command prompt 工具来运行 npm 命令，因为它就是为了 npm 命令而生成的命令窗口，而且这个 Node.js command prompt 输入的 npm 命令，它其实也是相当于去调用系统本身的命令提示符工具，但是，一开始我们并不知道命令提示符工具能运行 npm ，而且最初安装 node 之前在命令提示符直接输入 npm 命令也是没有效果的，是在安装了 node 之后， npm 命令才开始起作用，也是才知道有 Node.js command prompt 这么一个东西来运行 npm 命令，而且作为这个时代的人，我认为命令输入工具过于老过于丑了，所以很抵制系统命令提示符这个东西，也很抵制命令化，所以能不用命令尽量不用命令，但这几乎看来是不太可能的。
安装完成后验证 node.js 是否安装成功，方法是查看 node/npm 版本，如图1-4-2，则说明自带 node/npm安装成功。注: npm 的作用就是对 Node.js 依赖的包进行管理，也可以理解为用来安装/卸载 Node.js 需要装的东西.
node -v
npm -v
【图1-4-2】
node 安装完成后需要配置 npm 安装的全局模块所在的路径，以及缓存 cache 的路径，自定义目录位置这是个好习惯，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数 -g ，g 代表 global 全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占 C 盘空间，没有这类强迫症的请忽略。如【图1-4-3】、【图1-4-4】：
【图1-4-3】如不配置路径则所有的 npm 安装都会安装到这个文件夹。
【图1-4-4】此图为配置了路径之后，会生成这两个文件夹，以后 npm 安装会指向 global 文件夹。
若要把全局模块所在路径及缓存路径切换到上图自定义位置，则需执行如下命令：
步骤一：配置路径到我们要迁移的目标文件夹。
npm config set prefix "D:\ProgramSetupFolder\Nodejs\node_global"
npm config set cache "D:\ProgramSetupFolder\Nodejs\node_cache"
步骤二：查看npm的本地仓库具体位置情况。
npm list -global：
步骤三：配置完成后，安装个module测试下执行安装结果。
npm install express -g （-g是全局安装），安装后去配置的两个目标文件夹看结果。三个步骤如图1-4-5：
【图1-4-5】安装完 express 示例空项目后，到目标 node_global 文件夹下看到 express 项目文件夹代表配置成功，否则 express 项目文件夹代表会默认存在 C 盘 npm下的 node_global 文件夹。
接下来配置环境变量。。。，个人非常讨厌配置环境配置，测试过后，不配置未出现问题，所以放弃配置。当改变 npm 安装存储路径之后，个人环境变量的路径也会自动跟着改变路径，查询不出版本说明安装不成功。则要去改用户环境变量了，配置和测试方法将放在文章底部有兴趣的看。
配置环境变量的目的大多是面向老机器，配置环境的引导。然后上面更改了 npm 的安装指向目录，所以个人环境变量也跟着改向配置后的目标目录，此段仅仅作为记录，经过测试不论是否更改存储路径不改动环境变量也不会出现任何问题。
1.5、操作 - 如何安装淘宝镜像 cnpm / 国内版本 npm ？
注:npm 是 国外的服务器，所以出现下载慢或者出现异常 cnpm 则是淘宝团队做的 npm 的镜像，解决下载慢或者出现异常问题，目前10分钟更新一次 保证与官服同步。其操作方式与用 npm 一致。 安装命令代码:
npm install cnpm -g --registry=https://registry.npm.taobao.org或者直接命令修改配置文件npm的指向路径直接指向国内淘宝镜像：就不用安装 cnpm 哦！
npm config set registry https://registry.npm.taobao.org1.6、yarn 是等同于并可以代替 npm / cnpm 的包管理命令工具。（下文讲解）
以上长篇大论主要是理解安装vue之前，搭建环境所要了解的 node npm cnpm yarn 知识。
2.0、操作 - 如何安装vue和vue脚手架？
好了，我们安装好node后，npm / cnpm / yarn开始可以使用了，这时候打开 Node.js command prompt ，输入 vue 官网给出的命令：
$ npm install vue -g（g是node_global的缩写，全局的意思。）
以下为安装卸载命令汇总
1、安装 vue 命令
npm install vue -g
2、查询全局安装vue版本号
npm list vue -g
3、安装 vue 脚手架命令
npm install @vue/cli -g
4、查询版本以验证 vue@cli 是否验证成功
vue -V
1、安装 cnpm 命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
2、卸载 vue 命令
npm uninstall vue -g
3、卸载 vue 脚手架 命令
npm uninstall @vue/cli -g
4、卸载 cnpm 命令
npm uninstall cnpm -g
运行 vue 脚手架搭建管理系统
vue ui如【图2-1】
【图2-1】为安装vue成功，能查出当前安装版本。
输入脚手架安装命令，安装 vue脚手架，注意命令 npm install @vue/cli -g （有个@为最新版本） //npm install vue-cli -g（不是最新版本）最后能查询到 vue@cli 的版本证明已经安装成功。如【图2-2】
【图2-2】能查询到版本号
至此 vue 环境和脚手架环境已经搭好，本片文章目的达到。
继续在命令窗口或者 VsCode 新建个项目，进入控制台 输入 vue ui 命令(最新脚手架支持)，命令窗口会给个访问地址或者命令自动启动浏览器打开一个地址，进入vue脚手架后台管理系统。
如【图2-3】【图2-4】
【图2-3】
【图2-4】
好了，可以开始在此管理器创建一个新的 vue 项目了，由于篇幅过长，下一篇文章开始讲解如何使用这个管理器创建 vue 项目和各个参数的设置。
3.0、操作 - 如何拿到一个已经创建的项目跑起一个项目？
当我们接到一个新工作，或者让我们熟悉一下基于 vue/React/*** 的项目的时候。
我们从哪拿到？如何拿到这个项目并且运行这个项目？步骤是在命令窗口输入以下命令：
1.git clone xxx （xxx为同事分享的git仓库克隆链接）
（打开Node.js command prompt/系统命令提示符工具，输入命令：）
2.cd /d D:xxx （xxx为自己新建的项目的文件夹路径，进入这个文件夹，然后输入命令：）
3.npm install
（这个install的意思是安装这个项目的必须依赖文件才能运行，有哪些依赖文件需要被下载？其实依赖的这些文
件名称都存在了package.json这个文件中，每个项目开发的过程中会安装一些插件和一些其他环境，这个就是项
目的依赖，当我们运行这个命令后，npm会根据package.json的需要去下载相应依赖环境，而package.json里的
这些依赖，是我们在做项目的时候，生成的，依赖文件并不需要上传至git仓库，
因为npm都已经共享了。）
npm下载依赖完成后，会生成一个node_modules文件夹，里面存的都是npm根据项目需要下载下来的依赖。
好了，项目克隆下来了，它里面大多已经包含了脚手架，也就是运行环境，依赖环境也下载了，接下来就可以运行，输入命令：
4.npm run dev/serve （dev/serve还是其他，根据项目的package.json的scripts对象的第一个属性决定的。）在上面 npm install 过程中，可能会因为某些问题，npm 下载不全或者有丢失，有出错，我们运行 npm run dev 的时候，会提示我们有百分之一的错误或者 npm run dev npm ERR! missing script: dev 等错误，可能是 npm install 不全，毕竟 npm 是国外的，下载过慢或者有丢失等问题，可以使用 cnpm/yarn install 来安装环境依赖。
这时是新起了一种与 npm 相同功能的包管理工具 yarn 。
按照以往，我们的拿项目-装依赖-运行项目步骤是：
git clone xxx
npm install
npm run dev但是现在我们可以
git clone xxx
yarn / yarn install
yarn start / yarn run dev3.1、理论 - Yarn是什么？
“Yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。”这句话让我想起了使用npm时的坑了：
npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
同一个项目，安装的时候无法保持一致性。由于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会继续下载和安装包。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。
带着这些坑，我开始了解Yarn的优势及其解决的问题。
3.2、理论 - Yarn如何安装与删除？
npm install -g yarn
npm uninstall -g yarn
3.3、理论 - Yarn的优点？
- 速度快 。速度快主要来自以下两个方面：
- 并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。
- 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。
- 安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。npm 其实也有办法实现处处使用相同版本的 packages，但需要开发者执行 npm shrinkwrap 命令。这个命令将会生成一个锁定文件，在执行 npm install 的时候，该锁定文件会先被读取，和 Yarn 读取 yarn.lock 文件一个道理。npm 和 Yarn 两者的不同之处在于，Yarn 默认会生成这样的锁定文件，而 npm 要通过 shrinkwrap 命令生成 npm-shrinkwrap.json 文件，只有当这个文件存在的时候，packages 版本信息才会被记录和更新。
- 更简洁的输出：npm 的输出信息比较冗长。在执行 npm install <package> 的时候，命令行里会不断地打印出所有被安装上的依赖。相比之下，Yarn 简洁太多：默认情况下，结合了 emoji直观且直接地打印出必要的信息，也提供了一些命令供开发者查询额外的安装信息。
- 多注册来源处理：所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。
- 更好的语义化： yarn改变了一些npm命令的名称，比如 yarn add/remove，感觉上比 npm 原本的 install/uninstall 要更清晰。
Yarn和npm命令对比
| npm | yarn |
|---|---|
| npm install | yarn |
| npm install react --save | yarn add react |
| npm uninstall react --save | yarn remove react |
| npm install react --save-dev | yarn add react --dev |
| npm update --save | yarn upgrade |
3.4、理论 - npm的未来：npm5.0
有了yarn的压力之后，npm做了一些类似的改进。
- 默认新增了类似yarn.lock的 package-lock.json；
- git 依赖支持优化：这个特性在需要安装大量内部项目（例如在没有自建源的内网开发），或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。
- 文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中，将改为使用创建 symlinks 的方式来实现（使用本地 tarball 包除外），而不再执行文件拷贝。这将会提升安装速度。目前yarn还不支持。
3.5、理论 - yarn总结
在npm5.0之前，yarn的优势特别明显。但是在npm之后，通过以上一系列对比，我们可以看到 npm5 在速度和使用上确实有了很大提升，值得尝试，不过还没有超过yarn。
综上我个人的建议是如果你已经在个人项目上使用 yarn，并且没有遇到更多问题，目前完全可以继续使用。但如果有兼容 npm 的场景，或者身处在使用 npm，cnpm，tnpm 的团队，以及还没有切到 yarn 的项目，那现在就可以试一试 npm5 了。
4.0、理论 - 环境变量的测试过程
按理将要新建系统环境变量
NODE_PATH
D:\ProgramSetupFolder\Nodejs\node_global\node_modules
安装 node 后默认用户环境变量path
C:\Users\NongHaoMinG\AppData\Roaming\npm
按理将要更改用户环境变量变成path
D:\ProgramSetupFolder\Nodejs\node_global
没更改 npm 安装存储路径
验证第一步，未更改用户环境变量和新建系统环境变量，操作如下：
1.1、全局安装淘宝惊醒cnpm -v 成功打印出版本。
1.2、全局安装vue，npm info vue version 成功打印出版本。
1.3、全局安装@vue/cli，vue -V成功打印出版本。
1.4、npm run dev 能运行成功。
1.5、vue ui 能成功运行。
更改了npm安装存储路径
验证第二步，案例更改用户环境变量和新建系统环境变量，后续操作是否成功，如
1.1、全局安装淘宝惊醒cnpm -v 成功打印出版本。
1.2、全局安装vue，npm info vue version 成功打印出版本。
1.3、全局安装@vue/cli，vue -V成功打印出版本。
1.4、npm run dev 能运行成功。
1.5、vue ui 能成功运行。
进一步验证
方法一：未更改 npm 安装存储路径，未更换新增任何环境变量，以上五种都能验证成功。
方法二：更换 npm 安装存储路径，未更换新增任何环境变量，以上五种都不能验证成功。
方法三：先只更改用户环境变量，不新增系统变量，以上五种能验证成功。
方法四：还原用户变量，只新增系统变量，以上五种都不能验证成功。
方法五：修改两种环境变量，以上五种能验证成功。
仍未明白为什么有些程序要改系统变量。参考文章：