RuoYi-Vue-Pro Architecture Overview
Vben5 Admin Panel

Core Positioning

Vben5 is RuoYi’s next-generation admin panel, based on Vben Admin 5.x (Monorepo architecture), with more advanced architectural design. It supports both Ant Design Vue and Element Plus UI component libraries — you can freely choose based on your team’s preferences.

Tech Stack: Vue3 + TypeScript + Vite + Vben5 + Ant Design Vue / Element Plus

Suitable Users

User ProfileWhy Choose This
Teams pursuing latest architectureMonorepo + more advanced state management + stronger type constraints
Ant Design ecosystem usersSupports Ant Design Vue, more international UI style
Large project teamsVben component system (Vxe Table / Vben Form / Vben Modal) better suited for complex forms and tables
Willing to accept feature migration statusSome business modules still being migrated from Vue3 version

Project Architecture

graph TB subgraph Monorepo["Monorepo Structure"] APPS["apps/
Application Entries"] PKGS["packages/
Shared Packages"] INTERNAL["internal/
Internal Tools"] end subgraph UI["Dual UI Library Support"] ANT["Ant Design Vue
More international style"] EP["Element Plus
More localized style"] end subgraph COMP["Vben Component System"] TABLE["Vben Vxe Table
High-Performance Table"] FORM["Vben Form
Declarative Forms"] MODAL["Vben Modal
Dialog Management"] DRAWER["Vben Drawer
Drawer Component"] end subgraph PAGES["Page Structure (Three Files Per Page)"] INDEX["index.vue
Page Entry"] FORM_V["form.vue
Form Definition"] DATA["data.ts
Data Logic"] end APPS --> UI APPS --> COMP APPS --> PAGES

Core Advantages

1. Monorepo Architecture

All packages managed in one repository, unified dependency versions, easier code reuse. Shared utility functions, type definitions, and components are placed under packages/.

2. Dual UI Library Switching

// Can choose Ant Design Vue
import { Button, Table, Form } from 'ant-design-vue';

// Or choose Element Plus
import { ElButton, ElTable, ElForm } from 'element-plus';

The same business logic can adapt to two UI styles, which is especially valuable for projects that need to be delivered to different clients.

3. Declarative Component System

Vben’s component system dramatically improves development efficiency for complex forms and tables:

<!-- Vben Vxe Table: Declarative Column Definition -->
<vxe-grid v-bind="gridOptions">
  <!-- Built-in pagination, sorting, filtering, export -->
</vxe-grid>

<!-- Vben Form: Declarative Form -->
<vben-form :schema="formSchema" />

Feature Migration Progress

ModuleStatusNotes
System Management✅ CompletedUsers/Roles/Menus/Departments etc.
Infrastructure✅ CompletedCode Generation/Files/Config etc.
BPM Workflow✅ Completed (v2.6.1)Ant Design version
CRM Customer Management✅ Completed (v2.6.1)Ant Design version
Pay Payment Center✅ Completed (v2.6.1)Ant Design version
Member Center✅ Completed (v2.6.1)Ant Design version
AI Large Model✅ Completed (v2.6.1)Ant Design version
ERP Purchase-Sales-Inventory🚧 In Progress-
Mall E-Commerce🚧 In Progress-

Quick Start

# 1. Enter directory
cd yudao-ui-admin-vben5

# 2. Install dependencies
pnpm install

# 3. Start dev server
pnpm run dev

# 4. Access
http://localhost:{port}
docs