Windows 系统 Vue+Node.js 本地开发环境搭建指南

写在前面：环境搭建小插曲(小白友好 |)

前阵子换掉了用了 2 年的旧电脑，新入手的笔记本干净得像张白纸 —— 没有任何开发环境。所以在安装测试中整理了一篇最易懂的指南。
没有复杂的术语，没有绕弯的步骤，只写 “小白能直接跟着做” 的操作 —— 这就是这篇环境搭建指南的由来。希望能帮到刚入门的朋友，少走点弯路，早点开始真正的代码学习～
流程图

一、安装前的准备

1. 确认你的 Windows 系统版本（Win10/Win11 均可，32 位 / 64 位都支持）
2. 关闭电脑里的杀毒软件（避免拦截安装包）
3. 准备一个稳定的网络（安装包需要在线下载）

第一步：安装 Node.js（必装！）

Vue 的运行依赖 Node.js 环境，所以先装 Node.js，会自动附带 npm（包管理工具）。

下载安装包

1. 打开官网：Node.js 官网下载页

2. 选择「Windows 安装程序」（推荐下载LTS 版本，即长期支持版，更稳定）

   • 64 位系统选 node-vxx.xx.x-x64.msi
   • 32 位系统选 node-vxx.xx.x-x86.msi

安装步骤

1. 双击下载好的 msi 文件，点击「Next」
2. 勾选「I accept the terms in the License Agreement」，点击「Next」
3. 选择安装路径（建议默认路径，或自定义到非 C 盘，比如D:\Node.js），点击「Next」
4. 保持默认选项（已勾选「Add to PATH」，关键！），点击「Next」
5. 不需要勾选「Automatically install the necessary tools...」，直接点击「Next」
6. 点击「Install」开始安装，等待进度条完成
7. 安装完成后点击「Finish」

验证是否安装成功

1. 按下 Win+R，输入 cmd 打开命令提示符
2. 输入以下两个命令，能显示版本号就说明安装成功：

# 查看Node.js版本
node -v
# 查看npm版本（Node.js自带）
npm -v

示例输出：
node -v → v20.10.0
npm -v → 10.2.3

第二步：配置 npm 镜像（可选但推荐）

默认的 npm 镜像在国外，下载速度慢，建议切换为国内淘宝镜像：

# 配置淘宝npm镜像
npm config set registry https://registry.npmmirror.com
# 验证是否配置成功
npm config get registry

输出https://registry.npmmirror.com就说明配置好了。

第三步：安装 Vue CLI（Vue 脚手架）

Vue CLI 是快速搭建 Vue 项目的工具，需要通过 npm 安装：

1. 全局安装 Vue CLI

打开命令提示符，输入：

# 安装最新版Vue CLI
npm install -g @vue/cli

安装过程可能需要 1-3 分钟，耐心等待，出现「added xxx packages」就说明安装完成。

2. 验证 Vue CLI 安装成功

输入以下命令，显示版本号即成功：

vue -V
# 注意是大写的V，不是小写v

示例输出：@vue/cli 5.0.8

第四步：测试 Vue 环境（可选）

安装完成后，我们可以快速创建一个 Vue 项目验证环境：

# 1. 创建名为vue-demo的项目
vue create vue-demo
# 2. 选择默认模板（Default ([Vue 3] babel, eslint)），按回车
# 3. 等待项目创建完成后，进入项目目录
cd vue-demo
# 4. 启动项目
npm run serve

启动成功后，浏览器打开 http://localhost:8080，能看到 Vue 的默认页面就说明整个环境搭建完成！

常见问题解决

1. 命令提示符输入node -v提示「不是内部或外部命令」：安装 Node.js 时没勾选「Add to PATH」，重新安装并勾选该选项。
2. 安装 Vue CLI 时提示「权限不足」：以管理员身份打开命令提示符再安装。
3. 下载速度慢：先配置淘宝镜像（第二步）再安装。

总结

1. 环境搭建核心顺序：安装 Node.js（自带 npm）→ 配置淘宝镜像 → 安装 Vue CLI，一步都不能乱。
2. 验证安装的关键命令：node -v（检查 Node）、vue -V（检查 Vue CLI）。
3. 小白避坑点：安装 Node.js 时务必勾选「Add to PATH」，安装 Vue CLI 用管理员权限，优先选 LTS 版本。

整个过程只要跟着步骤走，5-10 分钟就能完成环境搭建，接下来就可以开始你的 Vue 学习之旅啦！