cloud
41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
---
|
||
name: wind-frontend-conventions
|
||
description: wind_power_cal 前端 React+Vite 规范。用于前端页面/接口/路由开发时，遵循 api.js 信封封装、vite 代理与目录约定。
|
||
---
|
||
|
||
# 前端 React+Vite 规范
|
||
|
||
## 目录
|
||
`frontend/web_app/src/`：`main.jsx`（入口）→ `App.jsx`（react-router）→ `pages/` + `utils/api.js`。
|
||
|
||
## API 封装（必须遵守）
|
||
`src/utils/api.js`：`BASE_URL='/api'`，`request()` 统一处理信封：
|
||
- `fetch('/api'+url, {cache:'no-store'})` → 读 text→`JSON.parse`
|
||
- `status===0` 返回 `json.data`；否则 `throw new Error(json.msg)`
|
||
- 新增接口在此导出：
|
||
```js
|
||
export function getXxx() { return request('/xxx'); }
|
||
export function postXxx(payload) {
|
||
return request('/xxx', { method: 'POST', body: JSON.stringify(payload) });
|
||
}
|
||
```
|
||
|
||
## 路由 / 主题
|
||
- `react-router-dom` `BrowserRouter`，首页 `pages/HomePage.jsx`
|
||
- 暗色主题；样式用 **plain CSS**（`index.css` / `App.css` / `*.module.css`），非 Tailwind / 非 CSS-in-JS
|
||
- 后端经 `/api` 前缀；生产由后端托管 SPA（`document_root ./web`）
|
||
|
||
## 构建配置
|
||
`vite.config.js`：`base='/'`，dev server :5173，proxy `/api` → `http://localhost:8080`。
|
||
|
||
## 开发
|
||
```
|
||
cd frontend/web_app
|
||
npm install
|
||
npm run dev # http://localhost:5173
|
||
npm run build # → dist/，由 package.sh 同步到后端 web/
|
||
npm run lint
|
||
```
|
||
|
||
> 注意：若将来要把前端挂到子路径（如 nginx `/wind`），必须同步改 `base`、`BrowserRouter basename`、`api.js BASE_URL` 三处——单靠 nginx 无法搬移根路径 SPA（资源/路由是绝对/写死的）。
|