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