# 若依-vue3

**Repository Path**: tranquility-behind-the-waves/ruoyi-vue3

## Basic Information

- **Project Name**: 若依-vue3
- **Description**: 若依vue集成satoken+mybatis-plus，实现若依app支持H5和微信小程序，支持app端代码生成
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-26
- **Last Updated**: 2025-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 若依管理系统 (RuoYi-Vue3)

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Version](https://img.shields.io/badge/version-3.9.0-green.svg)](package.json)
[![Vue](https://img.shields.io/badge/Vue-3.5.16-4FC08D.svg)](https://vuejs.org/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.10.7-409EFF.svg)](https://element-plus.org/)
[![Vite](https://img.shields.io/badge/Vite-6.3.5-646CFF.svg)](https://vitejs.dev/)

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

## 🔗 配套项目

- **后端服务**: [ruoyi-background](https://gitee.com/tranquility-behind-the-waves/ruoyi-background.git)
- **管理端**: [ruoyi-vue3](https://gitee.com/tranquility-behind-the-waves/ruoyi-vue3.git) (当前项目)
- **移动端**: [ruoyi-app](https://gitee.com/tranquility-behind-the-waves/ruoyi-app.git)

## 📱 项目简介

若依管理系统是一个基于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

### 安装依赖

```bash
# 克隆项目
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地址：
   ```javascript
   const baseUrl = 'http://localhost:8888' // 修改为你的后端地址
   ```

2. **环境变量配置**
   
   创建 `.env.development` 文件：
   ```bash
   # 开发环境配置
   VITE_APP_ENV = 'development'
   VITE_APP_TITLE = '若依管理系统'
   ```

### 运行项目

```bash
# 开发环境
npm run dev

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

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

# 预览构建结果
npm run preview
```

## 📱 功能模块

### 🏠 首页
- 用户信息展示
- 系统统计数据
- 快捷功能入口
- 最近动态
- 系统信息

### 👤 个人中心
- 个人信息管理
- 头像修改
- 密码修改
- 个人设置

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

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

### 🛠️ 系统工具
- **代码生成** - 前后端代码自动生成
- **接口文档** - Swagger接口文档
- **表单构建** - 动态表单构建器

## 📸 应用截图

### 主要页面
<table>
<tr>
<td align="center">
<img src="img/用户管理.png" width="200" alt="用户管理"/>
<br/>用户管理
</td>
<td align="center">
<img src="img/角色管理.png" width="200" alt="角色管理"/>
<br/>角色管理
</td>
<td align="center">
<img src="img/部门管理.png" width="200" alt="部门管理"/>
<br/>部门管理
</td>
</tr>
<tr>
<td align="center">
<img src="img/菜单管理.png" width="200" alt="菜单管理"/>
<br/>菜单管理
</td>
<td align="center">
<img src="img/字典管理.png" width="200" alt="字典管理"/>
<br/>字典管理
</td>
<td align="center">
<img src="img/岗位管理.png" width="200" alt="岗位管理"/>
<br/>岗位管理
</td>
</tr>
<tr>
<td align="center">
<img src="img/参数设置.png" width="200" alt="参数设置"/>
<br/>参数设置
</td>
<td align="center">
<img src="img/通知公告.png" width="200" alt="通知公告"/>
<br/>通知公告
</td>
<td align="center">
<img src="img/在线用户.png" width="200" alt="在线用户"/>
<br/>在线用户
</td>
</tr>
<tr>
<td align="center">
<img src="img/数据监控.png" width="200" alt="数据监控"/>
<br/>数据监控
</td>
<td align="center">
<img src="img/接口文档.png" width="200" alt="接口文档"/>
<br/>接口文档
</td>
</tr>
</table>

## 🎨 设计系统

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

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

### 组件规范
- 统一的圆角、间距、阴影
- 响应式布局适配
- 暗黑模式支持
- 无障碍访问支持

## 🔐 权限控制

基于若依后台的权限体系：
- 基于角色的访问控制 (RBAC)
- 菜单级权限控制
- 按钮级权限控制
- 数据权限控制

## 📦 构建部署

### 构建命令
```bash
# 生产环境构建
npm run build:prod

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

### 部署说明

#### Nginx部署
```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部署
```dockerfile
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 进行类型检查（可选）

### 组件开发
```vue
<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接口
```javascript
// 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](LICENSE) 协议开源。

## 🙏 致谢

- [若依管理系统](https://gitee.com/y_project/RuoYi) - 后端管理系统
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - Vue3 UI组件库
- [Vite](https://vitejs.dev/) - 现代化构建工具

## 📞 联系我们

- 官方网站: [http://ruoyi.vip](http://ruoyi.vip)
- 问题反馈: [Issues](https://gitee.com/tranquility-behind-the-waves/ruoyi-vue3/issues)
- QQ交流群: 932521825

### 加入QQ群

<div align="center">
  <img src="img/QQ群.jpg" width="300" alt="若依管理系统交流群"/>
  <br/>
  <p>扫码加入若依管理系统交流群</p>
</div>

---

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