写在前面：环境搭建小插曲
前阵子换掉了用了 2 年的旧电脑，新入手的笔记本干净得像张白纸 —— 没有任何开发环境。所以在安装测试中整理了一篇最易懂的指南。
没有复杂的术语，没有绕弯的步骤，只写 “小白能直接跟着做” 的操作 —— 这就是这篇环境搭建指南的由来。希望能帮到刚入门的朋友，少走点弯路，早点开始真正的代码学习～
流程图
一、安装前的准备
- 确认你的 Windows 系统版本（Win10/Win11 均可，32 位 / 64 位都支持）
- 关闭电脑里的杀毒软件（避免拦截安装包）
- 准备一个稳定的网络（安装包需要在线下载）
第一步：安装 Node.js（必装！）
Vue 的运行依赖 Node.js 环境，所以先装 Node.js，会自动附带 npm（包管理工具）。
下载安装包
- 打开官网：Node.js 官网下载页
选择「Windows 安装程序」（推荐下载LTS 版本，即长期支持版，更稳定）
- 64 位系统选 node-vxx.xx.x-x64.msi
- 32 位系统选 node-vxx.xx.x-x86.msi
安装步骤
- 双击下载好的 msi 文件，点击「Next」
- 勾选「I accept the terms in the License Agreement」，点击「Next」
- 选择安装路径（建议默认路径，或自定义到非 C 盘，比如D:\Node.js），点击「Next」
- 保持默认选项（已勾选「Add to PATH」，关键！），点击「Next」
- 不需要勾选「Automatically install the necessary tools...」，直接点击「Next」
- 点击「Install」开始安装，等待进度条完成
- 安装完成后点击「Finish」
验证是否安装成功
- 按下 Win+R，输入 cmd 打开命令提示符
- 输入以下两个命令，能显示版本号就说明安装成功：
# 查看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 安装：
- 全局安装 Vue CLI
打开命令提示符，输入：
# 安装最新版Vue CLI
npm install -g @vue/cli安装过程可能需要 1-3 分钟，耐心等待，出现「added xxx packages」就说明安装完成。
- 验证 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 的默认页面就说明整个环境搭建完成！
常见问题解决
- 命令提示符输入node -v提示「不是内部或外部命令」：安装 Node.js 时没勾选「Add to PATH」，重新安装并勾选该选项。
- 安装 Vue CLI 时提示「权限不足」：以管理员身份打开命令提示符再安装。
- 下载速度慢：先配置淘宝镜像（第二步）再安装。
总结
- 环境搭建核心顺序：安装 Node.js（自带 npm）→ 配置淘宝镜像 → 安装 Vue CLI，一步都不能乱。
- 验证安装的关键命令：node -v（检查 Node）、vue -V（检查 Vue CLI）。
- 小白避坑点：安装 Node.js 时务必勾选「Add to PATH」，安装 Vue CLI 用管理员权限，优先选 LTS 版本。
整个过程只要跟着步骤走，5-10 分钟就能完成环境搭建，接下来就可以开始你的 Vue 学习之旅啦！
暂无评论