Skip to content

前端工程结构 ​

这篇解决什么 ​

PC 管理端在哪个仓、日常改哪套应用、公共包和页面怎么分。读完能对上 ruoyi-office-vben/apps/web-antd,不要去改 web-ele / web-naive 当产品页。

后端仍是 48080 + /admin-api。工作区总览见 项目结构。路由和请求见本批后面两篇。

示意图:产品管理端只维护 web-antd。共享能力在 monorepo 包里。

从哪改 ​

名称说明仓库路径
仓pnpm + Turbo 的 Vben Admin 5ruoyi-office-vben/
主应用日常页面与 APIapps/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。路由怎么挂见 菜单与路由。

text
apps/web-antd/src/
  api/        按模块
  views/      按模块
  components/ 业务公共组件
  router/     守卫与少量静态路由
  store/      Pinia

相关篇 ​

联系我们

获取报价、演示和二开方案

微信咨询二维码

微信咨询

17156169080

添加时备注「RuoYi Office」

在线体验商业版