# RuoYi-Solon-Vue3

**Repository Path**: my-space/RuoYi-Solon-Vue3

## Basic Information

- **Project Name**: RuoYi-Solon-Vue3
- **Description**: 适配若依的前端项目，基于 Vue3.5、TypeScript、Vite5、Pinia、Element-Plus、Unocss 开源的前端项目模板，使用目前最新技术栈开发，美观的页面，简洁的代码结构，不过度封装，简单易上手。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### RuoYi-Solon-Vue3新前端，脱离于传统若依前端，呈现新的界面样式，多一份选择。
项目右上角一键三连，开源不易，支持作者。

### 📖介绍

 一款基于 Vue3.5、TypeScript、Vite5、Pinia、Element-Plus、Unocss 开源的前端项目模板，使用目前最新技术栈开发，美观的页面，简洁的代码结构，不过度封装，简单易上手。
#### 目前已经适配ruoyi-solon，项目地址:https://gitee.com/opensolon/ruoyi-solon。

##### *理论上适用于ruoyi-vue相关后端项目，同学们可自行测试，作者正在测试中。

### ⚡️技术栈

1. ✨Vue3.5，Vite6 , [pnpm](<[https://](https://www.pnpm.cn/)https://>) 速度快，本地开发占有磁盘空间小
2. ⭐[Element-Plus](https://element-plus.org/zh-CN/) 最流行的Vue3 UI组件库，社区活跃，易用
3. ⏳[Unocss](http://www.unocss.cn/) 原子化css,丰富的图标集，图标选择不用愁 [icones](https://icones.js.org/) ，[iconify](https://iconify.design/)，简单易用，复制图标名，项目封装好了Svg-Icon组件
4. ☘️[vueuse](https://vueuse.org/)巨多封装好使用的hooks集合，强大无需多言
5. 💪TypeScript 必须，适当的约束，更好的规范
6. 🍍使用[Pinia](https://pinia.vuejs.org/zh/) 进行数据状态管理，符合直觉的 Vue.js 状态管理库
7. ☀ [vxetable](https://vxetable.cn/#/start/install) 强大的table，丰富的功能，虚拟列表，超大数据渲染的不二选择
8. ✋[auto-animate](https://auto-animate.formkit.com/#usage)适用于多种框架的动画库，简单易用，一个指令搞定过度效果
9. ✊[better-scroll2.0](https://better-scroll.github.io/docs/zh-CN/)强大的滚动库，很多大厂都在使用，项目已在better-scroll基础上封装组件，简化使用
10. 💾[vite-plugin-mock-dev-server](https://vite-plugin-mock-dev-server.netlify.app/)本地mock数据
11. 🌓 支持暗夜模式，可以根据操作系统主题自动切换，也可手动更改，自由，浪漫
12. ⚙️ 多种定制化布局，主题颜色，自由度高
***来源于cat-admin（https://gitee.com/LeonGqz/vue3-app-admin），感谢作者。

### 内置功能
#### 1.用户管理：用户是系统操作者，该功能主要完成系统用户配置。
#### 2.部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
#### 3.岗位管理：配置系统用户所属担任职务。
#### 4.菜单管理：配置系统菜单，操作权限，按钮权限标识等。
#### 5.角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
#### 5.字典管理：对系统中经常使用的一些较为固定的数据进行维护。
#### 6.参数管理：对系统动态配置常用参数。
#### 7.通知公告：系统通知公告信息发布维护。
#### 8.操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
#### 9.登录日志：系统登录日志记录查询包含登录异常。
#### 10.在线构建：拖动表单元素生成相应的HTML代码。
#### 11.代码生成：前后端代码的生成（java、html、xml、sql）支持CRUD下载。
#### 12.定时任务：任务调度及调度日志记录。
#### 13.服务监控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。
#### 14.系统接口：根据业务代码自动生成相关的api接口文档。
#### 15.在线用户：当前系统中活跃用户状态监控。
#### 16.缓存监控：对系统的缓存信息查询。

### 项目启动

首先必须安装node.js

[node.js下载地址](<[https://](https://nodejs.org/zh-cn)https://>)

推荐使用[nvm](<[https://](https://nvm.uihtm.com/)https://>)管理node版本

确保你的环境满足以下要求：

- **git**: 你需要git来克隆和管理项目版本。
- **NodeJS**: >=18.12.0，推荐 18.19.0 或更高。
- **pnpm**: >= 8.7.0，推荐 8.14.0 或更高。

**安装依赖**

```bash
npm i pnpm -g
pnpm i
```

> 由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。

**启动项目**

```bash
pnpm dev
```

**构建项目**

```bash
pnpm build
```
### 登录界面
![输入图片说明](doc/images/image.png)
#### 其他页面
![输入图片说明](doc/images/home.png)
![输入图片说明](doc/images/user.png)
![输入图片说明](doc/images/theme.png)
![输入图片说明](doc/images/dark.png)

#### 代码生成（生成模板在VM文件夹下），将VM文件夹中代码模板文件替换原有文件（后端代码生成模块vm文件夹），如下图所示：
![输入图片说明](doc/images/code.png)
### 开发辅助
![输入图片说明](doc/images/vue-tool.png)
UnoCSS Inspector http://localhost:8888/__unocss/#/
Inspect: http://localhost:8888/__inspect/

### 熬夜辛苦，如果能帮到你，请支持作者
<img src="doc/images/pay.jpg" width="200" height="260" alt="描述文字" title="可选标题">