本教程所使用的系统为Windows10 LTSC 64位；Node.js版本为18.17.1。 

注：截止到2023年09月15日Node.js-18.17.1为长期维护版的最新版本

---

目录

1 下载Node.js

2 安装Node.js

3 配置Node.js以及环境变量

4 安装Vue

5 创建Vue项目

---

1 下载Node.js

在Node.js官网下载最新版本的Node.js长期维护版。(根据系统实际情况选择32位或64位，这里选择的是64位的)

官网下载页链接：Node.js官网下载页

---

2 安装Node.js

2.1 安装包下载完成后，选中单击鼠标右键点击 “安装” ，进入安装页面。如下图所示：

安装页面：

2.2  点击 “Next” 并 勾选 “I accept the terms in License Agreement”，然后继续点击 “Next” 至 “Tools for Native Modules”页面，如下图所示。

注： 安装路径使用默认路径，不要随意修改。不然后续在配置环境变量时可能会出现问题。

2.3  取消 “Automatically install the necessary tools.” 前面的勾，如下图所示，若没有勾选则直接点击“Next”即可。

2.4 点击 “Install”，并等待其安装完成。

2.5 完成后，点击 “Finish” 退出安装页面即可 。

---

2.6 检查node.js是否安装成功。分别依次输入如下命令：

node -v
npm -v

 执行完成后，出现如下图所示，说明安装成功。

---

3 配置Node.js以及环境变量

3.1 找到并进入Node.js的安装目录，在Node.js的安装目录下新建node_global和node_cache两个空文件夹，如下图所示。

注：Node.js默认安装路径：C:\Program Files\nodejs

在新建的node_global文件夹内，新建node_modules文件夹，如下图所示：

3.2 修改并配置环境变量

※※※ 警告：在修改或添加环境变量如出现配错需要删除变量时，请不要删除原有的任何变量，否则会出现系统程序或软件无法被调用，甚至出现系统故障导致系统损坏！ ※※※

3.2.1 选择 ”此电脑“右键，点击“属性”，如下图所示：

3.2.2 在打开的页面向下划，找到并点击 “高级系统设置”。进入“系统属性”页面，然后依次点击 “高级” ，“环境变量”。如下图所示：

3.2.3 在打开的环境变量窗口中，新建系统变量，如下图所示：

变量名：NODE_PATH

变量值：C:\Program Files\nodejs\node_global\node_modules

变量值是之前新创建在node.js安装目录中node_global文件夹内的node_modules文件夹的位置(绝对路径)。

然后点击确定。

注：变量值建议使用“浏览目录”选项进行选择添加，防止出现路径错误。

3.2.4 选择系统变量中的 “Path” 并点击 ”编辑“，进入编辑环境变量窗口。点击 ”新建“，添加如下内容：

%NODE_PATH%

注：百分号一定是英文的，不可使用中文的

然后点击 ”确定“。

如下图所示：

3.2.5 在用户变量中选择 “Path” 并点击 ”编辑“，进入编辑环境变量窗口。选中“C:\Users\Administrator\AppData\Roaming\npm” 然后点击编辑，将其修改为自己新建的node_global文件夹，完成后点击 “确定”。 

注：上文中的 “Administrator” 是此次教程电脑所使用的用户名，各电脑的用户名不一样。第1张图的变量是没有改之前的，注意分别。

如下图所示：

修改完成后的，如下图所示：

3.2.6 到此环境变量修改完成，依次点击 “确定” 关闭环境变量窗口和系统属性窗口。

3.3 以管理员身份运行命令提示符或PowerShell。

注：一定要以管理员身份运行，不然部分命令可能无效。

3.3.1 方法一：在开始菜单 ”Windows系统“ 下找到命令提示符，右键选择更多并点击“以管理员身份运行”，如下图所示。

3.3.2 方法二：使用键盘的 Win键+X 点击”Windows PowerShell (管理员)“ 。有的这里是“命令提示符 (管理员)”，若是命令提示符则不需要继续操作此步骤。

打开后，输入如下命令，切换成命令提示符模式。

cmd

如下图所示：

3.4 配置npm本地仓库目录

在命令提示符窗口中分别依次输入如下命令：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

执行成功后如下图所示：

注：这里的引号、冒号和反斜线均为英文标点，不可使用中文标点，不然会报错。

检验仓库目录是否已经被修改，输入如下命令：

npm list -global

 出现如下图命令返回信息，说明仓库目录修改成功

3.5 配置镜像站

# 官方镜像站
http://registry.npmjs.org
#淘宝镜像站(两个选一个即可)
http://registry.npm.taobao.org
https://registry.npm.taobao.org

注：如果有梯子可以使用官方镜像站；如果没有就使用国内的淘宝镜像站即可。

这里使用国内的淘宝镜像站进行此次配置。配置命令如下：

npm config set registry=http://registry.npm.taobao.org

执行成功后如下图所示：

注：这里的冒号和斜线均为英文标点，不可使用中文标点，不然会报错。

3.6 检查配置

输入如下命令：

npm config list

执行成功后如下图所示：

注：配置完成后需要重启命令提示符窗口，不然变量不生效。

---

4 安装Vue

需要按下面的步骤安装，顺序不可颠倒

注：1.“-g” 这个参数必须要加，这表示全局安装，会安装到global全局目录中，如果不加 “-g” 这个参数，那这个组件会被安装到当前目录下的node_modules文件夹内，若没有则会自动创建node_modules文件夹。

2.每执行一条命令后，确认该组件已经成功安装后再安装下一个。

4.1 vue组件

命令如下：

npm install vue -g

安装成功，返回信息如下图所示，同其自动将npm更新至最新版本：

4.2 webpack组件

命令如下：

npm install webpack -g

安装成功，返回信息如下图所示:

4.3 webpack-cli组件

命令如下：

npm install webpack-cli -g

安装成功，返回信息如下图所示:

在这里需要检查webpack和webpack-cli组件是否成功安装，输入如下命令：

webpack -v

出现如下图显示表示安装成功：

4.4 @vue/cli组件

命令如下：

npm install @vue/cli -g

安装成功，返回信息如下图所示:（内容较长，仅截取部分内容）

 在这里需要检查vue和@vue/cli组件是否成功安装，输入如下命令：

vue -V
# 注：参数为大写的字母V

或者也可输入如下命令：

vue --version

出现如下图显示表示安装成功：

4.5 vue-router组件

命令如下：

npm install vue-router -g

安装成功，返回信息如下图所示:

---

到此Node.js的安装配置、环境变量的配置以及Vue环境的搭建全部完成。下面是Vue3项目的创建，本此使用默认自动配置。

---

5 创建Vue项目

5.1 找一个位置新建一个文件夹，作为所有Vue项目的根文件夹

注：文件夹的名字尽量是英语的，这样可防止后续出现某个组件不识别中文目录的情况。如需要使用分隔单词可以使用英文中的下划线，即“_”。

这里我创建文件夹的位置为：”C:\Users\Administrator\Documents\ “下，如下图所示：

5.2 进入刚创建的文件夹，在空白位置按住键盘中的"shift"键单击鼠标右键，点击“在此处打开PowerShell窗口”，如下图所示：

5.3 在PowerShell中输入如下命令，切换成命令提示符窗口：

cmd

执行成功如下图显示：

5.4 输入如下命令创建Vue项目：

vue create vuedemo

注：这里的“vuedemo” 是项目名称，可随意更换，不必与此一样。此外，项目名称需小写，不可以大写，否则会报错。

当看到如下页面则说明成功进入vue项目创建选项列表：

5.5 选择 "Default ([Vue_3 babel, eslint])" ，按下Enter键。此时项目开始创建，如下图所示：(因电脑和网络环境有所差异，所需时间可能长短不一，请耐心等待)

注：项目在创建过程中需保证网络连接正常，不能断网，否则创建会因网络异常而中断。(创建时需要从网上下载所需文件以及配置)

创建成功如下图所示：

5.6 进入项目目录，并输入启动命令即可

cd vuedemo
npm run serve

注：这里的“vuedemo” 是项目名称。

如在首次运行时弹出Windows安全中心警报(即windows Defender 防火墙网络拦截警报)，务必将专用网络和公用网络全部勾上，如下图所示：

成功运行，如下图所示：

下图为chrome浏览器(即谷歌浏览器) 显示页面：

到此，Vue项目的创建就已全部完成。

如需终止，使用键盘上的 Ctrl键+C ，此时会出现提示询问是否要终止。如果需要，按"Y"，再按Enter键；不需要，按"N"，再按Enter键。这里选择终止，如下图所示：

---

声明：本教程仅供学习研究使用，严禁以任何方式进行售卖或变相售卖此教程，一经发现查实将追究其法律责任。