RuoYi 快速上手指引

这篇文章是我在使用 RuoYi 过程中，为了帮助自己和团队更快上手而整理的前端配置笔记，希望能帮到也在踩坑的小伙伴。

📦 技术栈概览

RuoYi 的前端默认采用：

• Vue2 + Vue Router
• Element UI
• Vuex 状态管理
• Axios + 权限拦截器
• 动态路由 + 菜单权限控制
• 可切换到 Vue3（RuoYi-Vue-Plus 支持）

🧭 路由配置方式

RuoYi 使用的是「后端驱动动态路由」模式：

1. 菜单管理页面新增路由配置
   • 登录后台系统 → 系统管理 → 菜单管理
   • 添加菜单类型为 菜单 或 按钮，设置对应的路由地址（即页面路径）
2. 前端组件自动匹配
   • 新增组件放入 /views 文件夹
   • 组件路径应与路由地址匹配，如 /monitor/job/index.vue
   • 系统自动通过懒加载 + 路由拦截器实现动态加载

📌 优点是：可配置、易扩展、不用手动改 routes 文件。

🔑 权限控制方法

1. 按钮级权限

   • 使用 v-hasPermi 指令控制按钮显示：

     <el-button v-hasPermi="['system:user:add']">新增用户</el-button>

2. 角色权限

   • 每个用户对应一个或多个角色，每个角色绑定多个菜单
   • 在 store/modules/user.js 里存储用户权限信息

3. 接口权限拦截

   • Axios 请求统一添加 Authorization Token
   • 请求头设置写在 src/utils/request.js

👤 用户与角色配置

1. 新建用户
   • 后台 → 系统管理 → 用户管理 → 添加新用户
   • 设置角色、部门、岗位等信息
2. 绑定权限角色
   • 创建新角色（系统管理 → 角色管理）
   • 勾选角色拥有的菜单与按钮权限
   • 分配角色给用户即可控制访问能力

💡 实用功能推荐

功能名	说明
🧬 代码生成	通过数据库表结构自动生成前后端模板，支持 Vue 页面与接口
📂 文件上传	文件/图片上传封装完备，支持 OSS、本地存储
📊 图表支持	内置支持 Echarts、分页表格、导入导出
⛅ 字典系统	支持动态字典配置，前端通过组件直接调用展示
🔁 请求拦截	Axios 封装统一 Token 与异常处理逻辑

📁 项目结构小贴士

src/
├── api/           // 所有请求封装
├── components/    // 通用组件
├── views/         // 页面组件目录
├── store/         // Vuex 状态管理
├── router/        // 路由定义（辅助配置）
├── utils/         // 工具函数、拦截器等
└── permission.js  // 权限路由控制核心文件

✅ 总结

如果你在做 B 端管理系统，RuoYi 的这套动态配置机制、权限体系和代码生成器，真的能节省你大量时间。尤其是在项目初期或者多项目平行开发的场景下，前端不用重复造轮子，只管对接业务逻辑就行。