48 lines
2.8 KiB
Markdown
48 lines
2.8 KiB
Markdown
# dealerhub 前端选型决策备忘录：Vue 3 vs React（2026-09-08）
|
||
|
||
## 问题
|
||
当前 dealerhub 前端为 Vue 3.5 + Element Plus（今天刚上线），换成 React 会不会更好？
|
||
|
||
## 关键事实
|
||
|
||
### 1. 当前 Vue 前端规模（实测）
|
||
- 12 个页面 + MainLayout + api/router 层，**约 1,800 行 / 16 个文件**
|
||
- 已完成：构建、部署（192.168.5.7:18050 同源托管）、Playwright 全链路验证
|
||
- 技术栈：Vite 5 + Vue 3.5 + Element Plus + Pinia + Vue Router（hash）
|
||
|
||
### 2. 你的 React 项目史（全局记忆，客观事实）
|
||
| 项目 | 前端 |
|
||
|---|---|
|
||
| novel_reader | React 19 + Vite |
|
||
| 营养师数据查询 | React 18 + Vite + zustand + PWA |
|
||
| EnglishDrill | React 18 + Vite SPA |
|
||
| school-meal-web | React + Vite |
|
||
| **dealerhub** | **Vue 3（唯一一个 Vue 项目）** |
|
||
|
||
你的 4 个既有项目全是 React，dealerhub 是第一个 Vue。你本人 review/修改 React 代码的经验远多于 Vue。
|
||
|
||
### 3. 生态匹配度（ERP 中后台场景）
|
||
- **React + Ant Design**：antd 5 的 Table（列筛选/固定列/虚拟滚动/可编辑单元格）对"仿管家婆"这类重表格 ERP 更强；ProComponents 可再省一层 CRUD 封装；本 harness 同时装有 antd MCP（组件文档/示例即时可查）
|
||
- **Vue + Element Plus**：同样成熟，够用；本 harness 也有 elementplus MCP。两者生态差异不构成决定性理由
|
||
- 性能、打包体积在此规模下差异可忽略
|
||
|
||
## 结论：会更好，但只在特定前提下
|
||
|
||
**建议换 React（倾向明确），前提是这个项目前端你会持续自己演进**（加页面、改交互、后续接 AI/报表自定义等）：
|
||
1. 你的主力经验栈是 React，后续每改一页的边际成本更低，agent 生成代码你也更容易把关
|
||
2. antd 对重表格 ERP 的组件能力更贴合
|
||
3. 迁移窗口成本最低：只有 1,800 行、API 层独立（axios client 可原样复用）、后端零改动，估计一轮任务即可完成迁移 + Playwright 回归。**越晚迁越贵**
|
||
|
||
**可以不换的情形**：前端已接近"够用、少改"，主要由 agent 维护而你不直接读改代码——那 Vue 版继续跑完全没问题，沉没成本不值得纠结。
|
||
|
||
## 若迁移的执行方案（估算一轮）
|
||
1. `frontend-react/`：Vite + React 18 + Ant Design 5 + React Router + zustand（沿用 `/api` 代理与部署方式）
|
||
2. 复用 `client.js`（axios 拦截器逻辑等价改写）；按页面迁移：登录 → 大盘 → 三大报表 → 凭证（最复杂）→ 其余列表页
|
||
3. 部署方式不变（dist → backend/frontend_dist/ → whitenoise），Playwright 回归同一套验证路径
|
||
4. Vue 版保留 `frontend/` 目录一个版本周期作对照，稳定后删除
|
||
|
||
## 决策点（待用户拍板）
|
||
- A. 保持 Vue，继续开发
|
||
- B. 迁移 React + Ant Design（推荐）
|
||
- C. 先试点迁移 1 个复杂页（凭证页）对比后再定
|