前端工程结构
这篇解决什么
PC 管理端在哪个仓、日常改哪套应用、公共包和页面怎么分。读完能对上 ruoyi-office-vben/apps/web-antd,不要去改 web-ele / web-naive 当产品页。
后端仍是 48080 + /admin-api。工作区总览见 项目结构。路由和请求见本批后面两篇。
示意图:产品管理端只维护 web-antd。共享能力在 monorepo 包里。
从哪改
| 名称 | 说明 | 仓库路径 |
|---|---|---|
| 仓 | pnpm + Turbo 的 Vben Admin 5 | ruoyi-office-vben/ |
| 主应用 | 日常页面与 API | apps/web-antd/ |
| 工作区清单 | apps/*、packages/* | pnpm-workspace.yaml |
| 启动 | pnpm dev:antd | 根 package.json |
| 构建 | pnpm build:antd,生产 base 默认 /web/ | apps/web-antd/vite.config.ts |
| 后端对照 | 管理端接口 | ruoyi-office/yudao-server |
apps/web-antd/src/ 按后端模块同构:api/{module}/ 调接口,views/{module}/ 放页面。别名 #/* 和 @/* 都指向 src/。业务页优先用 Page、useVbenVxeGrid、useVbenModal,不要绕开适配器直接铺一张裸表。
公共包:packages/effects(权限指令)、packages/utils(菜单转路由)、packages/@core(类型与 UI kit)。改共享包会影响所有 apps,默认只改 web-antd。
开发代理:/admin-api → http://localhost:48080/admin-api,再 rewrite 掉前缀。本机没起后端时,页面能开、接口全失败。
Windows 不要建名为 aux / con / nul 的目录。用 auxiliary。
字段
| 名称 | 说明 | 仓库路径 |
|---|---|---|
@vben/web-antd | 主应用 filter 名 | 根脚本 dev:antd |
VITE_BASE | 生产子路径,默认 /web/ | vite.config.ts |
#/api/request | 业务请求入口 | src/api/request.ts |
不要把 playground 当产品
playground、docs、web-ele 是脚手架残留。客户看见的是 web-antd + Ant Design Vue。
先对菜单再写页面
新功能先有 views/.../index.vue 和菜单 component 路径,再写 API。路由怎么挂见 菜单与路由。
apps/web-antd/src/
api/ 按模块
views/ 按模块
components/ 业务公共组件
router/ 守卫与少量静态路由
store/ Pinia