Vue3 Admin Panel
Core Positioning
Vue3 Admin Panel is RuoYi’s primary frontend solution and the frontend project with the most complete business features. If you’re unsure which frontend to choose, pick this one — pages for all 14 subsystems are first implemented here.
Tech Stack: Vue3 + TypeScript + Vite + Element Plus + Pinia
Suitable Users
| User Profile | Why Choose This |
|---|---|
| Teams pursuing stability | All features are first implemented here, most thoroughly tested |
| Element Plus ecosystem users | Mature component library, complete documentation, active community |
| Need the most complete business features | All 14 subsystems have corresponding pages |
| Secondary development scenarios | Clear code structure, highly modular |
Project Architecture
graph TB
subgraph Entry
MAIN["main.ts
Application Entry"] end subgraph CoreLayer["Core Layer"] ROUTER["router/
Route Configuration"] STORE["store/
Pinia State Management"] UTILS["utils/
Utility Functions"] end subgraph RequestLayer["Request Layer"] AXIOS["utils/request.ts
axios Wrapper
baseURL / timeout / Interceptors"] API["api/
APIs Organized by Module"] MOCK["mock/
Mock Data"] end subgraph ViewLayer["View Layer (Organized by Subsystem)"] SYS_V["views/system/
System Management"] BPM_V["views/bpm/
Workflow"] CRM_V["views/crm/
Customer Management"] ERP_V["views/erp/
Purchase-Sales-Inventory"] MALL_V["views/mall/
E-Commerce"] end subgraph ComponentLayer COMPS["components/
Shared Components"] DIRS["directives/
Custom Directives"] PLUGINS["plugins/
Plugins"] end MAIN --> ROUTER MAIN --> STORE ROUTER --> ViewLayer ViewLayer --> API API --> AXIOS AXIOS --> UTILS
Application Entry"] end subgraph CoreLayer["Core Layer"] ROUTER["router/
Route Configuration"] STORE["store/
Pinia State Management"] UTILS["utils/
Utility Functions"] end subgraph RequestLayer["Request Layer"] AXIOS["utils/request.ts
axios Wrapper
baseURL / timeout / Interceptors"] API["api/
APIs Organized by Module"] MOCK["mock/
Mock Data"] end subgraph ViewLayer["View Layer (Organized by Subsystem)"] SYS_V["views/system/
System Management"] BPM_V["views/bpm/
Workflow"] CRM_V["views/crm/
Customer Management"] ERP_V["views/erp/
Purchase-Sales-Inventory"] MALL_V["views/mall/
E-Commerce"] end subgraph ComponentLayer COMPS["components/
Shared Components"] DIRS["directives/
Custom Directives"] PLUGINS["plugins/
Plugins"] end MAIN --> ROUTER MAIN --> STORE ROUTER --> ViewLayer ViewLayer --> API API --> AXIOS AXIOS --> UTILS
Key Design
axios Request Wrapper
baseURL: /api
timeout: 30000ms
Interceptors:
- Request interceptor: Auto-attach Token
- Response interceptor: Unified error handling, Token expiration redirect to login
Page File Organization
Each business page typically contains:
views/erp/purchase/order/
├── index.vue # List page
├── form.vue # Form dialog
└── const.ts # Constants
Permission Control
Menus and buttons are controlled via permission identifiers:
// Button permission example
<el-button v-hasPermi="['erp:purchase-order:create']">Add</el-button>
// Menus returned by backend, frontend dynamically renders based on role
Comparison with Other Frontends
| Dimension | Vue3 Admin Panel | Vben5 | Vue2 |
|---|---|---|---|
| Positioning | Primary, most complete features | Next-gen, more advanced architecture | Classic, Vue2 compatible |
| UI Library | Element Plus | Ant Design / Element Plus | Element UI |
| Business Features | ✅ Full coverage | 🚧 Gradual migration | ✅ Full coverage |
| Developer Experience | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| Use Case | First choice for new projects | For cutting-edge tech stack | Vue2 legacy projects |
Quick Start
# 1. Enter frontend directory
cd yudao-ui-admin-vue3
# 2. Install dependencies
pnpm install
# 3. Start dev server
pnpm run dev
# 4. Access
http://localhost:80