本文介绍基于 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