Node.js和Vue开发环境搭建：从下载到全局工具链配置指南

脚本专家

在开始 Vue 项目开发之前，需要先搭建 Node.js 运行环境并安装 Vue CLI 等全局工具。本文基于 Windows 系统，详细记录从 Node.js 下载、环境变量配置到 Vue CLI、cnpm、express 等模块安装的完整流程。

一、下载与安装 Node.js

访问 Node.js 官方下载页（https://nodejs.org/en/download/），根据操作系统选择对应的安装包（注意区分 32 位与 64 位）。安装时建议修改默认路径（如 C:\node），避免安装在 Program Files 目录下可能引发的权限问题。一路 Next 完成安装后，打开 CMD 验证：

2. node -v   # 显示版本号即安装成功
3. npm -v    # 显示版本号即安装成功

复制代码

二、配置 npm 全局模块与缓存目录

Node.js 安装完成后，需要调整 npm 的全局安装路径和缓存路径，避免占用系统盘空间或出现权限错误。

1. 在 Node.js 安装目录（例如 C:\node）下创建两个文件夹：node_global 和 node_cache。

2. 打开 CMD 执行以下命令设置路径：

2. npm config set prefix "C:\node\node_global"
3. npm config set cache "C:\node\node_cache"

复制代码

3. 配置系统环境变量：
   - 右键“此电脑” -> 属性 -> 高级系统设置 -> 环境变量。
   - 在“系统变量”中新建变量 NODE_PATH，值为 C:\node\node_global\node_modules。
   - 在“用户变量”中找到 Path，编辑新增 C:\node\node_global（替换原有 Node.js 路径或追加）。
   - 点击确定保存所有窗口。

三、安装 Vue 脚手架与常用全局模块

环境变量配置完成后，重新打开 CMD（使新配置生效），依次安装以下工具：

1. 安装 Vue CLI 2.x（旧版）（可选）：

2. cnpm install --global vue-cli
3. vue -V   # 注意 V 大写，查看版本

复制代码

2. 升级 npm 自身：

2. cnpm install npm -g
3. npm -v   # 查看 npm 版本（小写 v）

复制代码

3. 安装 cnpm（淘宝镜像）：

2. npm install cnpm -g
3. # 或指定镜像源安装
4. npm install -g cnpm --registry=https://registry.npm.taobao.org

复制代码

4. 安装 Vue CLI 3.x/4.x（新版）：

2. npm install -g @vue/cli

复制代码

5. 安装 Express 框架（按需）：

2. npm install express -g   # -g 表示全局安装

复制代码

安装完成后，可通过

2. vue --version

复制代码

或

2. express --version

复制代码

验证全局命令是否可用。

注意事项

- 如果使用淘宝镜像，建议优先安装 cnpm，后续全局包均可通过 cnpm install 加速下载。
- 环境变量配置后必须重新打开 CMD 窗口才能生效。
- 全局模块安装路径若未正确设置，可能出现“无法识别 vue 命令”的错误，请检查 NODE_PATH 和 Path 是否指向 node_global。

以上步骤在 Windows 10 及 Windows 11 上测试通过，适用于个人开发机或团队统一环境搭建。

热心网友5

非常详细的教程，步骤清晰，尤其是环境变量配置和目录设置这两块，对新手特别友好。补充一点：如果后续需要同时维护多个Node版本，可以考虑装一个nvm-windows来管理，切换版本更方便。另外现在Vue官方推荐Vite作为构建工具，官方脚手架也升级成了`create-vue`，不过你介绍的`@vue/cli`依然稳定可用。感谢分享！