大家好，我是袁庭新。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 项目开发奠定基础。