Node.js 与 Vue CLI 安装指南(Windows 系统)
一、Node.js 安装步骤
1. 安装包获取
- 官网下载:Node.js 官网
- 推荐选择 LTS 版本(长期支持版)
- 双击运行安装包:
2. 安装向导配置
- 点击 "Next" 进入安装界面:
- 安装路径选择:
- 新建英文路径(如
D:\NodeJS
) - 禁止包含中文或空格(否则会导致依赖安装失败)
- 新建英文路径(如
- 勾选关键选项:
(自动配置环境变量)
3. 完成安装
- 点击 "Finish" 结束安装流程。
二、环境验证
1. 检查 Node.js 和 npm
- 打开命令提示符(
Win + R
→ 输入cmd
):node -v # 应显示版本号(如 v18.18.2) npm -v # 应显示版本号(如 9.8.1)
2. 配置镜像加速(解决网络问题)
npm config set registry https://registry.npmmirror.com
3. 设置全局安装路径
npm config set prefix "E:\AllEdit\EditNodeJS\NodeJSFile"
三、Vue CLI 安装步骤
1. 清理代理与缓存
npm config set proxy null npm config set https-proxy null npm cache clean --force
2. 安装 Vue CLI
npm install -g @vue/cli
3. 验证安装
vue --version # 应显示版本号(如 @vue/cli 5.0.8)
四、常见问题解决
问题类型 | 解决方案 |
---|---|
网络错误(ENOTFOUND) | 1. 检查镜像源是否设置正确 2. 执行 ping registry.npmmirror.com 测试网络3. 临时关闭防火墙/杀毒软件 |
权限不足 | 以管理员身份运行命令提示符 |
命令无法识别 | 重新安装 Node.js 并确认勾选自动配置环境变量选项 |
安装警告(deprecated) | 可忽略(由旧版依赖引起,不影响基础功能) |
五、高级配置(可选)
1. 恢复官方镜像源
npm config set registry https://registry.npmjs.org
2. 使用淘宝镜像工具(cnpm)
npm install -g cnpm --registry=https://registry.npmmirror.com
3. 全局模块路径管理
npm config set prefix "D:\NodeJS\npm_global"
六、注意事项
- 路径规范:所有安装路径必须使用 英文+数字,禁止包含空格或特殊符号(如
Program Files
会导致报错) - 环境变量:若安装后命令仍不可用,手动添加路径到系统变量
PATH
中 - 版本兼容:
- Vue 2 已停止维护,建议通过
vue create
时选择 Vue 3 模板 - 若需长期开发,建议升级 Node.js 至最新 LTS 版本
- Vue 2 已停止维护,建议通过
七、安装后建议
- 安装常用工具:
npm install -g yarn typescript
- 开发工具推荐使用 VSCode,并安装插件:Vetur、ESLint
- 学习资源:
- Vue 3 官方文档:https://v3.vuejs.org
- Node.js 中文网:https://nodejs.cn
提示:若安装过程卡顿,可通过
Ctrl + C
终止后重试,或使用cnpm
替代npm
加速下载。