# 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. 验证：
   ```bash
   node -v
   # 输出: v18.x.x 或更高
   npm -v
   # 输出: 9.x.x 或更高
   ```

**macOS:**
```bash
brew install node
node -v
npm -v
```

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

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

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

### 步骤 3：安装 pnpm（推荐）

```bash
npm install -g pnpm
pnpm -v
```

### 步骤 4：验证 Vite 可用

```bash
# 创建测试项目
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`