healthapp/TODOS/01-环境搭建/02-Web前端Vue环境搭建.md

02-Web 前端 Vue 环境搭建

目标

搭建 Vue 3 + TypeScript + Vite 开发环境。

---

前置要求

• Node.js 18+
• npm 或 pnpm 包管理器

---

实施步骤

步骤 1：安装 Node.js

Windows:

1. 下载 Node.js LTS：https://nodejs.org/
2. 选择 Windows Installer (.msi)
3. 双击安装，默认配置即可
4. 验证：

   node -v
   # 输出: v18.x.x 或更高
   npm -v
   # 输出: 9.x.x 或更高
   

macOS:

brew install node
node -v
npm -v

Linux:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm -v

步骤 2：配置 npm 镜像（国内加速）

npm config set registry https://registry.npmmirror.com
npm config get registry
# 输出: https://registry.npmmirror.com

步骤 3：安装 pnpm（推荐）

npm install -g pnpm
pnpm -v

步骤 4：验证 Vite 可用

# 创建测试项目
npm create vite@latest vue-test -- --template vue-ts

cd vue-test
npm install
npm run dev

# 浏览器访问 http://localhost:5173 看到 Vue 页面即成功

步骤 5：安装开发工具（可选）

VSCode 推荐扩展：

• Vue - Official（Vue 官方扩展）
• TypeScript Vue Plugin (Volar)
• ESLint
• Prettier

---

需要创建的文件

本步骤无需创建项目文件，仅环境配置。

---

验收标准

• node -v 显示 18+
• npm config get registry 显示国内镜像
• Vite 测试项目可以正常启动

---

预计耗时

10-15 分钟

---

下一步

完成后进入 01-环境搭建/03-APP-ReactNative环境搭建.md