若依vue集成satoken+mybatis-plus，实现若依app支持H5和微信小程序，支持app端代码生成

若依管理系统 (RuoYi-Vue3)

基于 Vue3 + Element Plus + Vite 构建的现代化后台管理系统，提供完整的企业级应用开发解决方案。

🔗 配套项目

• 后端服务: ruoyi-vue-sa-token
• 管理端: ruoyi-vue3 (当前项目)
• 移动端: ruoyi-app

📱 项目简介

若依管理系统是一个基于Spring Boot + Vue3的前后端分离的权限管理系统，采用现代化的前端技术栈，提供完整的用户权限管理、系统监控、代码生成等功能。

✨ 核心特性

• 🚀 现代化技术栈 - Vue3 + Element Plus + Vite + Pinia
• 🎨 响应式设计 - 适配各种屏幕尺寸，支持暗黑模式
• 🔐 完整权限 - 基于角色的权限控制系统
• 📊 实时监控 - 系统监控、在线用户、操作日志等
• 🛠️ 系统管理 - 用户、角色、部门、菜单等完整管理功能
• 🎯 组件化开发 - 丰富的UI组件库和自定义组件
• 🔄 状态管理 - 基于Pinia的现代化状态管理
• 📝 代码生成 - 支持前后端代码自动生成
• 🎭 主题定制 - 支持多种主题色彩和布局模式

🏗️ 技术栈

前端框架

• Vue 3.5.16 - 渐进式JavaScript框架
• Element Plus 2.10.7 - Vue3 UI组件库
• Vite 6.3.5 - 现代化构建工具
• Pinia 3.0.2 - Vue状态管理库
• Vue Router 4.5.1 - 官方路由管理器

开发工具

• SCSS - CSS预处理器
• ES6+ - 现代JavaScript语法
• Axios 1.9.0 - HTTP客户端
• ECharts 5.6.0 - 数据可视化图表库

核心依赖

• @vueuse/core 13.3.0 - Vue组合式API工具集
• js-cookie 3.0.5 - Cookie操作库
• jsencrypt 3.3.2 - RSA加密库
• nprogress 0.2.0 - 页面加载进度条
• vue-cropper 1.1.1 - 图片裁剪组件

📁 项目结构

RuoYi-Vue3/
├── public/                 # 静态资源
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码
│   ├── api/              # API接口定义
│   │   ├── login.js      # 登录相关接口
│   │   ├── menu.js       # 菜单接口
│   │   ├── monitor/      # 监控模块接口
│   │   ├── system/       # 系统管理接口
│   │   └── tool/         # 工具模块接口
│   ├── assets/           # 静态资源
│   │   ├── icons/        # SVG图标
│   │   ├── images/       # 图片资源
│   │   └── styles/       # 样式文件
│   ├── components/       # 自定义组件
│   │   ├── Breadcrumb/   # 面包屑组件
│   │   ├── Crontab/      # 定时任务组件
│   │   ├── DictTag/      # 字典标签
│   │   ├── Editor/       # 富文本编辑器
│   │   ├── FileUpload/   # 文件上传
│   │   ├── ImageUpload/  # 图片上传
│   │   ├── Pagination/   # 分页组件
│   │   └── SvgIcon/      # SVG图标组件
│   ├── directive/        # 自定义指令
│   │   ├── permission/   # 权限指令
│   │   └── common/       # 通用指令
│   ├── layout/           # 布局组件
│   │   └── components/   # 布局子组件
│   ├── plugins/          # 插件配置
│   ├── router/           # 路由配置
│   ├── store/            # 状态管理
│   │   └── modules/      # 模块化Store
│   ├── utils/            # 工具函数
│   │   ├── auth.js       # 认证工具
│   │   ├── request.js    # 请求工具
│   │   └── ruoyi.js      # 若依工具
│   ├── views/            # 页面组件
│   │   ├── error/        # 错误页面
│   │   ├── login.vue     # 登录页面
│   │   ├── index.vue     # 首页
│   │   ├── system/       # 系统管理页面
│   │   ├── monitor/      # 系统监控页面
│   │   └── tool/         # 系统工具页面
│   ├── App.vue           # 应用入口组件
│   ├── main.js           # 主入口文件
│   └── permission.js     # 权限控制
├── vite/                 # Vite配置
│   └── plugins/          # Vite插件
├── index.html            # HTML模板
├── package.json          # 项目配置
├── vite.config.js        # Vite配置
└── README.md             # 项目说明

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

# 克隆项目
git clone https://gitee.com/tranquility-behind-the-waves/ruoyi-vue3.git

# 进入项目目录
cd ruoyi-vue3

# 安装依赖
npm install
# 或使用 yarn
yarn install

配置说明

1. 修改API地址

   编辑 vite.config.js 文件，修改后端API地址：

   const baseUrl = 'http://localhost:8888' // 修改为你的后端地址
   

2. 环境变量配置

   创建 .env.development 文件：

   # 开发环境配置
   VITE_APP_ENV = 'development'
   VITE_APP_TITLE = '若依管理系统'
   

运行项目

# 开发环境
npm run dev

# 构建生产环境
npm run build:prod

# 构建预发布环境
npm run build:stage

# 预览构建结果
npm run preview

📱 功能模块

🏠 首页

• 用户信息展示
• 系统统计数据
• 快捷功能入口
• 最近动态
• 系统信息

👤 个人中心

• 个人信息管理
• 头像修改
• 密码修改
• 个人设置

🔧 系统管理

• 用户管理 - 用户增删改查、状态管理、角色分配
• 角色管理 - 角色权限配置、用户分配
• 部门管理 - 组织架构管理
• 菜单管理 - 系统菜单配置
• 字典管理 - 数据字典维护
• 岗位管理 - 岗位信息管理
• 参数设置 - 系统参数配置
• 通知公告 - 系统公告管理

📊 系统监控

• 在线用户 - 实时在线用户监控
• 登录日志 - 用户登录记录
• 操作日志 - 系统操作记录
• 服务监控 - 服务器性能监控
• 缓存监控 - Redis缓存监控
• 定时任务 - 定时任务管理

🛠️ 系统工具

• 代码生成 - 前后端代码自动生成
• 接口文档 - Swagger接口文档
• 表单构建 - 动态表单构建器

📸 应用截图

主要页面

用户管理	角色管理	部门管理
菜单管理	字典管理	岗位管理
参数设置	通知公告	在线用户
数据监控	接口文档

🎨 设计系统

项目采用统一的设计系统，确保视觉一致性：

色彩规范

• 主色调: #409EFF (Element Plus 蓝)
• 成功色: #67C23A (绿色)
• 警告色: #E6A23C (橙色)
• 错误色: #F56C6C (红色)
• 信息色: #909399 (灰色)

组件规范

• 统一的圆角、间距、阴影
• 响应式布局适配
• 暗黑模式支持
• 无障碍访问支持

🔐 权限控制

基于若依后台的权限体系：

• 基于角色的访问控制 (RBAC)
• 菜单级权限控制
• 按钮级权限控制
• 数据权限控制

📦 构建部署

构建命令

# 生产环境构建
npm run build:prod

# 预发布环境构建
npm run build:stage

部署说明

Nginx部署

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /dev-api/ {
        proxy_pass http://your-backend-api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Docker部署

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

🛠️ 开发指南

代码规范

• 使用 ESLint 进行代码检查
• 遵循 Vue3 组合式API规范
• 使用 TypeScript 进行类型检查（可选）

组件开发

<template>
  <div class="custom-component">
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
// 使用组合式API
import { ref, reactive, onMounted } from 'vue'

// 响应式数据
const data = ref('')
const state = reactive({})

// 生命周期
onMounted(() => {
  // 初始化逻辑
})
</script>

<style scoped lang="scss">
.custom-component {
  // 组件样式
}
</style>

API接口

// api/example.js
import request from '@/utils/request'

// 获取列表
export function getList(params) {
  return request({
    url: '/api/example/list',
    method: 'get',
    params
  })
}

// 新增数据
export function addData(data) {
  return request({
    url: '/api/example',
    method: 'post',
    data
  })
}

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具的变动

📄 开源协议

本项目基于 MIT 协议开源。

🙏 致谢

• 若依管理系统 - 后端管理系统
• Vue.js - 渐进式JavaScript框架
• Element Plus - Vue3 UI组件库
• Vite - 现代化构建工具

⭐ 如果这个项目对你有帮助，请给个Star支持一下！