Vue3+Spring Boot 若依 RuoYi-Vue3 快速搭建企业级后台
本文介绍基于 Vue3 和 Spring Boot 的若依(RuoYi-Vue3)快速开发平台。该平台采用前后端分离架构,集成 Vite 构建、Element Plus 组件库及 Spring Security 权限体系。核心功能包括代码生成器、RBAC 权限控制及系统监控。文章涵盖技术栈详解、项目结构、启动步骤及与 Vue2 版本的差异对比,适用于企业级后台、OA、ERP 等系统的快速开发与原型验证。

本文介绍基于 Vue3 和 Spring Boot 的若依(RuoYi-Vue3)快速开发平台。该平台采用前后端分离架构,集成 Vite 构建、Element Plus 组件库及 Spring Security 权限体系。核心功能包括代码生成器、RBAC 权限控制及系统监控。文章涵盖技术栈详解、项目结构、启动步骤及与 Vue2 版本的差异对比,适用于企业级后台、OA、ERP 等系统的快速开发与原型验证。


作为国内较热门的 Java 开源快速开发平台之一,若依(Ruo-Yi)凭借完善的权限体系和强大的代码生成器,成为开发者搭建后台管理系统的首选。升级后的 RuoYi-Vue3 版本基于 Vue3+Spring Boot 打造,融合了 Vite 秒级热更新、Composition API 等现代化特性,提升企业级后台开发效率。
相比传统开发模式和旧版 Vue2 版本,RuoYi-Vue3 具备以下优势:
- SpringBoot 2.7.x/3.x(核心框架)
- SpringSecurity + JWT(认证授权,保障接口安全)
- MyBatisPlus(ORM 框架,简化数据库操作)
- Druid(数据库连接池,稳定高效)
- Redis(缓存支持,提升系统性能)
- Quartz(定时任务调度)
- 多数据库兼容:MySQL/PostgreSQL/Oracle
- Vue 3.3+(Composition API,灵活组织代码)
- Vite 4.x(构建工具,秒级热更新)
- Element Plus 2.x(UI 组件库,美观且实用)
- Vuex/Pinia(状态管理)
- Vue Router 4(动态路由配置)
- Axios(HTTP 请求封装)
- TypeScript(可选支持,类型安全)
RuoYi-Vue3 的功能模块设计全面,无需额外开发即可满足大部分后台场景:
| 模块分类 | 核心功能 | 实用价值 |
|---|---|---|
| 系统管理 | 用户/角色/菜单/部门/岗位管理 | 搭建基础组织架构和权限载体 |
| 系统监控 | 在线用户、定时任务、Redis 缓存、服务监控 | 实时掌握系统运行状态 |
| 系统工具 | 代码生成器、字典管理、参数配置 | 提升开发效率,统一系统配置 |
| 权限控制 | 菜单级(可见范围)、按钮级(操作权限)、数据级(数据范围) | 精细化控制访问权限,保障数据安全 |
其中代码生成器是核心亮点!操作流程如下:
# 前端项目(ruoyi-vue)
ruoyi-vue/
├── public/ # 静态资源(如 favicon)
├── src/
│ ├── api/ # API 接口请求封装
│ ├── assets/ # 图片、样式等静态资源
│ ├── components/ # 通用组件(如分页、弹窗)
│ ├── router/ # 动态路由配置
│ ├── store/ # Vuex/Pinia 状态管理
│ ├── utils/ # 工具函数(如权限判断、请求拦截)
│ ├── views/ # 页面组件(核心业务页面)
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── vite.config.js # Vite 构建配置
└── package.json # 依赖配置
# 后端项目(ruoyi-admin)
ruoyi-admin/
├── src/main/java/com.ruoyi/
│ ├── RuoYiApplication.java # 启动类
│ ├── controller/ # 接口控制器(接收前端请求)
│ ├── service/ # 业务逻辑层
│ ├── mapper/ # MyBatis Mapper 接口
│ ├── domain/ # 实体类(对应数据库表)
│ └── framework/ # 框架核心(权限、日志、异常处理)
└── pom.xml # Maven 依赖配置
携带 JWT Token -> 验证通过 -> 返回结果 Vue 组件 -> API 请求 -> Spring Security 认证 -> Controller 接收请求 -> Service 处理业务逻辑 -> Mapper 操作数据库/Redis
提前安装以下依赖:
# 克隆后端项目
git clone https://gitee.com/y_project/RuoYi-Vue.git
# 克隆前端项目(Vue3 分离版)
git clone https://gitee.com/y_project/RuoYi-Vue3.git
ruoyi-vue3);sql 目录下的初始化脚本;application-druid.yml,配置数据库连接信息和 Redis 地址。http://localhost:5173;启动前端:
cd RuoYi-Vue3
npm install
npm run dev # 启动前端,默认端口 5173
启动后端:
cd RuoYi-Vue/ruoyi-admin
mvn spring-boot:run # 启动 Spring Boot 应用,默认端口 8080
| 特性 | RuoYi-Vue2 | RuoYi-Vue3 |
|---|---|---|
| Vue 版本 | Vue 2.x | Vue 3.x(Composition API) |
| 构建工具 | Webpack | Vite(秒级热更新) |
| UI 组件库 | Element UI | Element Plus |
| 性能 | 良好 | 更优(Tree-shaking 按需加载) |
| 开发体验 | Options API | Composition API(代码更灵活) |
| TypeScript | 不支持 | 原生支持(类型安全) |
RuoYi-Vue3 适合以下场景:
作为一款开源免费(MIT 协议可商用)的框架,RuoYi-Vue3 具备成熟的企业级最佳实践(统一异常处理、接口响应封装、多环境配置),并有活跃社区支持。无论是新手快速入门,还是资深开发者提升效率,都是不错的选择!

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online