RuoYi-Vue-Pro 架构总览
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