大家好，我是袁庭新。Vue CLI是基于Vue的应用开发提供的一个标准的脚手架工具。为应用搭建基础的框架结构，提供插件、开发服务、Preset、构建打包功能。
Vue CLI背后集成了现代化开发的诸多功能，通过简单的命令就可以完成"零配置"的项目环境搭建。在安装vue CLI前，需要先在自己的电脑上安装Node.js和NPM。安装了Node.js才能使用npm，然后才能安装Vue CLI。
1.安装Node.js
1.1 什么是Node.js
Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
为什么会有Node.js？
传统意义上的JavaScript运行在浏览器上，Chrome使用的JavaScript引擎是V8，Node.js是一个运行在服务端的框架，它的底层就使用了V8引擎，这样就可以使用JavaScript去编写一些服务端的程序，这样也就实现了用JavaScript去开发Apache + PHP以及Java Servlet所开发的服务端功能，这样做的好处就是前端和后端都采用JavaScript，即开发一份js程序即可以运行在前端也可以运行在服务端，这样比一个应用使用多种语言在开发效率上要高，不过Node.js属于新兴产品，一些公司也在尝试使用Node.js完成一些业务领域，Node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用Node.js实现消息推送、状态监控等的业务功能非常合适。
1.2 安装Node.js
根据操作系统下载对应版本的Node.js版本的安装包。Node.js官网地址：https://nodejs.org/en/download。
长期维护版（LTS）：16.14.0（包含npm 8.3.1），推荐多数用户使用。在你的平台上下载Node.js源码或预编译安装包，然后即可马上进行开发。
1.2.1 Windows系统安装Node.js
1.下载node-v16.14.0-x86.msi安装包。
2.双击安装包，根据窗口向导提示进行安装（注意：可根据磁盘使用情况，选安装目录进行安装）。
3.安装完成后，在cmd窗口检测是否安装成功。
C:\Users\yuanxin> node -v
v16.14.0
1.2.2 macOS系统安装Node.js
1.下载node-v16.14.0.pkg安装包。
2.双击安装包，根据窗口向导提示进行安装（注意：点击"安装" ，需输入您的密码进行安装）。
3.打开命令行执行查看版本号node -v，显示版本信息，标志安装成功。
yuanxin@yuanxindeMacBook-Pro ~ % node -v
v16.14.0
2.安装NPM
NPM全称Node Package Manager，它是Node包管理和分发的工具，使用NPM可以对应用的依赖进 行管理，NPM的功能与服务端项目构建工具Maven的依赖管理功能类似，我们通过NPM可以很方便 地下载js库，打包js文件。
2.1 自动安装NPM
Node.js已经集成了NPM工具。在命令提示符输入npm -v可查看当前NPM版本。
npm -v
2.2 查看包管理路径
包路径就是NPM从远程下载的js包所存放的路径。使用npm config ls查询NPM管理包路径（NPM下载的依赖包所存放的路径）。
npm config ls
我们发现NPM默认的管理包路径在（以Windows系统为例）：
C:\Users\yuanxin\AppData\Roaming\npm
2.3 设置包管理路径
依赖包放在C盘不太合适，为了方便对依赖包管理，我们将管理包的路径设置在单独的地方。
1.我们选择一个路径，专门存放这些依赖包。我选择创建一个目录：D:\programSoftware\npm。
2.在D:\programSoftware\npm下再创建npm_modules文件夹和npm_cache文件夹。
D:\programSoftware\npm\npm_modules
D:\programSoftware\npm\npm_cache
3.执行下边的命令，设置为自定义的包管理路径。
# 设置全局模块的安装路径
npm config set prefix "D:\programSoftware\npm\npm_modules"
# 设置缓存到npm_cache文件夹
npm config set cache "D:\programSoftware\npm\npm_cache"
4.此时再使用npm config ls查询NPM管理包路径发现路径已更改。
说明：Mac OS系统NPM包管理路径默认在/usr/local/lib/node_modules/npm目录下。
2.4 NPM环境变量配置
1.查看NPM的全局路径。
npm config get prefix
2.配置PATH环境变量。
(1) 添加新的系统变量。
key=NODE_HOME
value=D:\programSoftware\npm
(2) 为Path变量添加%NODE_HOME%\npm_modules路径。
%NODE_HOME%\npm_modules
%NODE_HOME%\npm_cache
3.查看包的安装位置。
npm root -g
2.5 安装CNPM
NPM默认会去国外的镜像下载js包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像（CNPM）来加快下载速度，因此只需要修改下镜像的地址即可。
1.查询当前镜像地址。
yuanxin@yuanxindeMacBook-Pro ~ % npm config get registry
https://registry.npmjs.org/
说明：默认地址（https://registry.npmjs.org/）在国外，所以安装缓慢或卡顿。
2.在联网的状态下，更改镜像地址，设置为淘宝镜像。
## 注意1：以管理员身份运行cmd
## 注意2：切换至优质网络环境下安装CNPM
npm config set registry https://registry.npm.taobao.org
# npm install -g cnpm --registry=https://registry.npm.taobao.org
3.查看镜像地址是否更换成功。
yuanxin@yuanxindeMacBook-Pro ~ % npm config get registry
https://registry.npm.taobao.org/
4.换成功后，返回VSCode中，重新使用npm install安装组件，安装过程将畅通无阻。
5.查看CNPM版本信息。
cnpm -v
3.安装Vue CLI
目前主流版本是3.x和4.x版本，安装4.x以上的版本是因为该版本既可以创建3.x项目与4.x项目。注意，以管理员身份打开命令行。
1.可以使用下列任一命令安装这个新的包。
npm install -g @vue/cli
2.安装之后，可以在命令行中访问vue命令。通过简单运行vue，看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
vue
3.输入vue -V检查版本。
vue -V
4.总结
本文主要介绍了 Vue 开发环境的搭建步骤，重点围绕 Node.js、NPM 和 Vue CLI 的安装展开。Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境，可在服务端运行 JavaScript 程序，提升开发效率，需根据操作系统下载对应版本安装包进行安装。NPM 用于管理应用依赖，其与 Node.js 集成，文中还介绍了查看与设置包管理路径、环境变量配置及安装淘宝镜像 CNPM 等操作。Vue CLI 是 Vue 应用开发的脚手架工具，主流版本为 3.x 和 4.x 以上，安装后可通过命令验证，为 Vue 项目开发奠定基础。
