person-site/.claude/skills/person-dev-stack/references/frontend.md

前端开发指南 (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

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

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 (开发时可选，生产由代理处理)

构建命令

npm install
npm run dev    # 开发服务器
npm run build  # 生产构建

与后端集成

• 开发：Vite 代理 API 请求到本地 Go 服务器。
• 生产：构建产物可内嵌到 Go 二进制或由 Caddy 服务。