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

核心定位

Vue3 管理後臺是 RuoYi 的主推前端方案，也是業務功能最完整的前端專案。如果你不確定選哪個前端，就選這個——所有 14 個子系統的頁面都在這裡最先落地。

技術棧：Vue3 + TypeScript + Vite + Element Plus + Pinia

適合什麼樣的使用者

使用者畫像為什麼選這個
追求穩定性的團隊所有功能最先在這裡實現，經過最充分的測試
Element Plus 生態使用者元件庫成熟、文件完善、社群活躍
需要最全業務功能14 個子系統全部有對應頁面
二次開發場景程式碼結構清晰，模組化程度高

專案架構

graph TB subgraph 入口 MAIN["main.ts
應用入口"] end subgraph 核心層["核心層"] ROUTER["router/
路由配置"] STORE["store/
Pinia 狀態管理"] UTILS["utils/
工具函式"] end subgraph 請求層["請求層"] AXIOS["utils/request.ts
axios 封裝
baseURL / timeout / 攔截器"] API["api/
按模組劃分 API"] MOCK["mock/
Mock 資料"] end subgraph 檢視層["檢視層（按子系統劃分）"] SYS_V["views/system/
系統管理"] BPM_V["views/bpm/
工作流"] CRM_V["views/crm/
客戶管理"] ERP_V["views/erp/
進銷存"] MALL_V["views/mall/
商城"] end subgraph 元件層 COMPS["components/
公共元件"] DIRS["directives/
自定義指令"] PLUGINS["plugins/
外掛"] end MAIN --> ROUTER MAIN --> STORE ROUTER --> 檢視層 檢視層 --> API API --> AXIOS AXIOS --> UTILS

關鍵設計

axios 請求封裝

baseURL: /api
timeout: 30000ms
攔截器:
  - 請求攔截：自動附加 Token
  - 響應攔截：統一錯誤處理、Token 過期跳轉登入頁

頁面檔案組織

每個業務頁面通常包含：

views/erp/purchase/order/
  ├── index.vue      # 列表頁面
  ├── form.vue       # 表單彈窗
  └── const.ts       # 常量定義

許可權控制

選單和按鈕都透過許可權標識控制：

// 按鈕許可權示例
<el-button v-hasPermi="['erp:purchase-order:create']">新增</el-button>

// 選單由後端返回，前端根據角色動態渲染

與其他前端的對比

維度Vue3 管理後臺Vben5Vue2
定位主推，功能最全新一代，架構更先進經典版，相容 Vue2
UI 庫Element PlusAnt Design / Element PlusElement UI
業務功能✅ 全覆蓋🚧 逐步遷移中✅ 全覆蓋
開發體驗⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
適用場景新專案首選追求最新技術棧Vue2 存量專案

快速上手

# 1. 進入前端目錄
cd yudao-ui-admin-vue3

# 2. 安裝依賴
pnpm install

# 3. 啟動開發伺服器
pnpm run dev

# 4. 訪問
http://localhost:80
docs