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

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 管理后台 Vben5 Vue2
定位 主推，功能最全 新一代，架构更先进 经典版，兼容 Vue2
UI 库 Element Plus Ant Design / Element Plus Element UI
业务功能 ✅ 全覆盖 🚧 逐步迁移中 ✅ 全覆盖
开发体验 ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐
适用场景 新项目首选 追求最新技术栈 Vue2 存量项目

快速上手

# 1. 进入前端目录
cd yudao-ui-admin-vue3

# 2. 安装依赖
pnpm install

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

# 4. 访问
http://localhost:80
docs