RuoYi-Vue-Pro 架构总览
Vben5 管理后台

Vben5 管理后台

核心定位

Vben5 是 RuoYi 的新一代管理后台，基于 Vben Admin 5.x（Monorepo 大仓架构），架构设计更先进。支持 Ant Design Vue 和 Element Plus 两种 UI 组件库，你可以根据团队偏好自由选择。

技术栈：Vue3 + TypeScript + Vite + Vben5 + Ant Design Vue / Element Plus

适合什么样的用户

用户画像 为什么选这个
追求最新架构的团队 Monorepo + 更先进的状态管理 + 更强的类型约束
Ant Design 生态用户 支持 Ant Design Vue，UI 风格更国际化
大型项目团队 Vben 组件体系（Vxe Table / Vben Form / Vben Modal）更适合复杂表单和表格
愿意接受功能迁移中的状态 部分业务模块仍在从 Vue3 版迁移中

项目架构

graph TB subgraph Monorepo["Monorepo 大仓结构"] APPS["apps/
应用入口"] PKGS["packages/
共享包"] INTERNAL["internal/
内部工具"] end subgraph UI["双 UI 库支持"] ANT["Ant Design Vue
风格更国际化"] EP["Element Plus
风格更国产化"] end subgraph COMP["Vben 组件体系"] TABLE["Vben Vxe Table
高性能表格"] FORM["Vben Form
声明式表单"] MODAL["Vben Modal
弹窗管理"] DRAWER["Vben Drawer
抽屉组件"] end subgraph PAGES["页面结构（每页面三文件）"] INDEX["index.vue
页面入口"] FORM_V["form.vue
表单定义"] DATA["data.ts
数据逻辑"] end APPS --> UI APPS --> COMP APPS --> PAGES

核心优势

1. Monorepo 大仓架构

所有包在一个仓库中管理，依赖版本统一，代码复用更方便。共享的工具函数、类型定义、组件统一放在 packages/ 下。

2. 双 UI 库自由切换

// 可以选择使用 Ant Design Vue
import { Button, Table, Form } from 'ant-design-vue';

// 也可以选择 Element Plus
import { ElButton, ElTable, ElForm } from 'element-plus';

同一个业务逻辑，可以适配两种 UI 风格，这对需要交付给不同客户的项目尤其有价值。

3. 声明式组件体系

Vben 的组件体系让复杂表单和表格的开发效率大幅提升：

<!-- Vben Vxe Table：声明式列定义 -->
<vxe-grid v-bind="gridOptions">
  <!-- 内置分页、排序、筛选、导出 -->
</vxe-grid>

<!-- Vben Form：声明式表单 -->
<vben-form :schema="formSchema" />

功能迁移进度

模块 状态 说明
系统管理 ✅ 已完成 用户/角色/菜单/部门等
基础设施 ✅ 已完成 代码生成/文件/配置等
BPM 工作流 ✅ 已完成（v2.6.1） Ant Design 版本
CRM 客户管理 ✅ 已完成（v2.6.1） Ant Design 版本
Pay 支付中心 ✅ 已完成（v2.6.1） Ant Design 版本
Member 会员 ✅ 已完成（v2.6.1） Ant Design 版本
AI 大模型 ✅ 已完成（v2.6.1） Ant Design 版本
ERP 进销存 🚧 进行中 -
Mall 商城 🚧 进行中 -

快速上手

# 1. 进入目录
cd yudao-ui-admin-vben5

# 2. 安装依赖
pnpm install

# 3. 启动开发服务器
pnpm run dev

# 4. 访问
http://localhost:端口号
docs