# 前端开发指南 (Vite + React)

## 概述
使用 Vite 作为构建工具，React 作为框架，开发现代前端应用。适用于快速原型和生产部署。

## 关键原则
1. **Vite 约定**：使用 `npm run build` 生成 `dist` 目录，环境变量以 `VITE_` 前缀。
2. **开发联调**：Vite dev server 支持代理 API 到后端。
3. **生产优化**：确保构建产物与后端路由兼容。
4. **界面与布局设计规范**：加载 frontend-design.md

## 示例项目结构
```
web/
├── public/              # 静态资源
├── src/
│   ├── components/      # React 组件
│   ├── App.jsx          # 主应用
│   └── main.jsx         # 入口
├── package.json
├── vite.config.js       # Vite 配置
└── index.html
```

## 示例 vite.config.js
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist'
  }
})
```

## 示例 App.jsx
```jsx
import { useState, useEffect } from 'react'

function App() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return (
    <div>
      <h1>My App</h1>
      {data ? <p>{data.message}</p> : <p>Loading...</p>}
    </div>
  )
}

export default App
```

## 环境变量
- `VITE_API_URL`: API 基础 URL (开发时可选，生产由代理处理)

## 构建命令
```bash
npm install
npm run dev    # 开发服务器
npm run build  # 生产构建
```

## 与后端集成
- 开发：Vite 代理 API 请求到本地 Go 服务器。
- 生产：构建产物可内嵌到 Go 二进制或由 Caddy 服务。