update readme

This commit is contained in:
Dftre 2024-05-02 12:33:18 +08:00
parent 29f7eb9b92
commit c2f9d93c9b
6 changed files with 108 additions and 85 deletions

193
README.md
View File

@ -1,37 +1,54 @@
# RuoYi-App-Geek # RuoYi-App-Geek
<div style="display: flex;justify-content: center;align-items: center;">
<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
<span style="font-weight: bolder;font-size: 30px;">+</span>
<img alt="logo" src="./doc/image/logo.png">
</div>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi-Geek v3.8.7.3.2</h1>
<h4 align="center">基于SpringBoot3+Vue3前后端分离的Java快速开发框架</h4>
<p align="center">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg">
</p>
# 引言 # 引言
RuoYi-Vue与RuoYi-App是基于SpringBoot2+Vue2打造的企业级开发框架得到了广大开发者的喜爱和积极反馈。随着技术的迭代进步SpringBoot3与Vue3逐渐进入开发者的视野。为了满足开发者对于新技术的追求RuoYi官方文档提供了SpringBoot2至SpringBoot3的升级方法。与此同时社区也涌现出了RuoYi-Vue3、RuoYi-App-Vue3的版本展现了开发者社区对于技术升级的热情与努力。
然而在升级的过程中官方的方法为了兼顾Java1.8的特性与一些老旧的方法,未完全拥抱**SpringBoot3与Java17**的全部特性。而社区的RuoYi-Vue3、RuoYi-App-Vue3版本由于出自不同的团队之手**兼容性及整合性**上存在些许**不足**。更为关键的是,尽管这些版本**支持TypeScript**,但**缺乏与之相匹配的tsconfig.json配置文件**这使得在主流编辑器如VSCode中TypeScript的语法提示环境并未达到最佳状态。 RuoYi-Vue 与 RuoYi-App 是基于 SpringBoot2+Vue2 打造的企业级开发框架得到了广大开发者的喜爱和积极反馈。随着技术的迭代进步SpringBoot3 与 Vue3 逐渐进入开发者的视野。为了满足开发者对于新技术的追求RuoYi 官方文档提供了 SpringBoot2 至 SpringBoot3 的升级方法。与此同时,社区也涌现出了 RuoYi-Vue3、RuoYi-App-Vue3 的版本,展现了开发者社区对于技术升级的热情与努力
鉴于此,**RuoYi-Geek生态**应运而生。它旨在为广大开发者提供一个既保留原版本核心特性,又整合社区版优点的全新解决方案。在**RuoYi-Geek**中我们深入调研了企业开发中常用的RuoYi扩展并直接在框架中集成确保开发者能够快速上手高效开发。同时我们采用了最新的**SpringBoot3+Vue3**技术栈彻底移除了为了兼容Java1.8而保留的老旧方法。更为重要的是我们为TypeScript开发环境加入了常用的tsconfig.json配置使得开发者在VSCode等编辑器中能够获得更为舒适、便捷的语法提示体验。 然而,在升级的过程中,官方的方法为了兼顾 Java1.8 的特性与一些老旧的方法,未完全拥抱**SpringBoot3 与 Java17**的全部特性。而社区的 RuoYi-Vue3、RuoYi-App-Vue3 版本由于出自不同的团队之手,**兼容性及整合性**上存在些许**不足**。更为关键的是,尽管这些版本**支持 TypeScript**,但**缺乏与之相匹配的 tsconfig.json 配置文件**,这使得在主流编辑器如 VSCode 中TypeScript 的语法提示环境并未达到最佳状态
**RuoYi-Geek**不仅仅是一个简单的升级版本更是对于RuoYi生态的一次全面优化与整合。我们相信通过**RuoYi-Geek生态**,开发者将能够更为高效、愉悦地开发出优秀的企业级应用。 鉴于此,**RuoYi-Geek 生态**应运而生。它旨在为广大开发者提供一个既保留原版本核心特性,又整合社区版优点的全新解决方案。在**RuoYi-Geek**中,我们深入调研了企业开发中常用的 RuoYi 扩展,并直接在框架中集成,确保开发者能够快速上手,高效开发。同时,我们采用了最新的**SpringBoot3+Vue3**技术栈,彻底移除了为了兼容 Java1.8 而保留的老旧方法。更为重要的是,我们为 TypeScript 开发环境加入了常用的 tsconfig.json 配置,使得开发者在 VSCode 等编辑器中能够获得更为舒适、便捷的语法提示体验
本项目为**RuoYi-Geek生态**的 RuoYi-App部分。 **RuoYi-Geek**不仅仅是一个简单的升级版本,更是对于 RuoYi 生态的一次全面优化与整合。我们相信,通过**RuoYi-Geek 生态**,开发者将能够更为高效、愉悦地开发出优秀的企业级应用。
本项目为**RuoYi-Geek 生态**的 RuoYi-App 部分。
**注意:** **注意:**
本人的其他两个推荐搭配的项目 本人的其他两个推荐搭配的项目
1. [Ruoyi-SpringBoot3-Geek: 这是若依极客生态的后端Springboot3版本 (gitee.com)](https://gitee.com/geek-xd/ruoyi-spring-boot3-geek)
2. [RuoYi-Vue3-Geek: 这是若依极客生态的Vue3版本 (gitee.com)](https://gitee.com/geek-xd/ruo-yi-vue3-geek)
**与Ruoyi-App相比较** 1. [Ruoyi-SpringBoot3-Geek: 这是若依极客生态的后端 Springboot3 版本 (gitee.com)](https://gitee.com/geek-xd/ruoyi-spring-boot3-geek)
1. 使用UniApp+Vue3的最新框架 2. [RuoYi-Vue3-Geek: 这是若依极客生态的 Vue3 版本 (gitee.com)](https://gitee.com/geek-xd/ruo-yi-vue3-geek)
2. 支持TS、SCSS、LESS等对js和css的扩充语言
3. 使用Pinia代替Vuex更加轻巧简单 **与 Ruoyi-App 相比较**
4. 使用uView-Plus好看的ui 代替uView-ui的ui组件库
5. 使用uCharts方便的图表画图工具 1. 使用 UniApp+Vue3 的最新框架
2. 支持 TS、SCSS、LESS 等对 js 和 css 的扩充语言
3. 使用 Pinia 代替 Vuex更加轻巧简单
4. 使用 uView-Plus好看的 ui 代替 uView-ui 的 ui 组件库
5. 使用 uCharts方便的图表画图工具
6. 已经完成了分包操作 6. 已经完成了分包操作
7. 提供了颜色选择器、二维码等常用组件 7. 提供了颜色选择器、二维码等常用组件
8. 将原有内置工具进行类型标定 8. 将原有内置工具进行类型标定
9. 分别提供了uview-plus和ucharts的模板可以直接使用或者用于学习 9. 分别提供了 uview-plus 和 ucharts 的模板(可以直接使用或者用于学习)
# 快速开始 # 快速开始
**注意:**node版本需要16+
**注意:**node 版本需要 16+
## 安装 ## 安装
一下三种方式均可,感觉速度 pnpm > yarn > cnpm > npm 一下三种方式均可,感觉速度 pnpm > yarn > cnpm > npm
***Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0*** **_Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0_**
```shell ```shell
npm install npm install
@ -44,26 +61,25 @@ pnpm install
1. 将项目下载到本地 1. 将项目下载到本地
2. 初始化项目---进入项目根路径运行指令初始化项目 2. 初始化项目---进入项目根路径运行指令初始化项目
```npm install``` `npm install`
4. 运行项目---进入项目根路径运行指令在package.json能找到所有指令 3. 运行项目---进入项目根路径运行指令(在 package.json 能找到所有指令):
以微信小程序为例:```npm run dev:mp-weixin``` 以微信小程序为例:`npm run dev:mp-weixin`
以H5为例``` npm run dev:h5``` 以 H5 为例 ` npm run dev:h5`
7. 查看项目 以微信小程序为例: 4. 查看项目 以微信小程序为例:
打开微信开发者工具,导入项目路径 dist\dev\mp-weixin 打开微信开发者工具,导入项目路径 dist\dev\mp-weixin
以H5为例打开浏览器输入控制台输出的地址 以 H5 为例:打开浏览器,输入控制台输出的地址
公众号属于H5以微信公众号为例打开微信开发者工具输入控制台输出的地址 注:公众号属于 H5以微信公众号为例打开微信开发者工具输入控制台输出的地址
9. 打包项目---进入项目根路径运行指令在package.json能找到所有指令 5. 打包项目---进入项目根路径运行指令(在 package.json 能找到所有指令):
以微信小程序为例:```npm run build:mp-weixin``` 以微信小程序为例:`npm run build:mp-weixin`
以H5为例 ```npm run build:h5``` 以 H5 为例: `npm run build:h5`
### 代码压缩 ### 代码压缩
默认是启动代码压缩的, 默认是启动代码压缩的,
如果需要关闭代码压缩可以将vite.config.js中的build.minify赋值为false。 如果需要关闭代码压缩,可以将 vite.config.js 中的 build.minify 赋值为 false。
如果需要打开代码压缩可以将vite.config.js中的build.minify赋值为true。 如果需要打开代码压缩,可以将 vite.config.js 中的 build.minify 赋值为 true。
# 内置组件(geek-xd) # 内置组件(geek-xd)
@ -77,11 +93,11 @@ pnpm install
#### tab - 页面插件 #### tab - 页面插件
可以通过设置参数中的config.data来实现页面传参 可以通过设置参数中的 config.data 来实现页面传参
| 方法 | 作用 | 参数 | | 方法 | 作用 | 参数 |
| ------------ | ------------------------------------------------ | ----------- | | ------------ | ------------------------------------------------ | ----------- |
| getData | 可以拿到上个页面通过tab传递的参数 | 无 | | getData | 可以拿到上个页面通过 tab 传递的参数 | 无 |
| reLaunch | 关闭所有页面,打开到应用内的某个页面 | url、config | | reLaunch | 关闭所有页面,打开到应用内的某个页面 | url、config |
| switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | url、config | | switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | url、config |
| redirectTo | 关闭当前页面,跳转到应用内的某个页面 | url、config | | redirectTo | 关闭当前页面,跳转到应用内的某个页面 | url、config |
@ -90,7 +106,7 @@ pnpm install
#### auth - 鉴权插件 #### auth - 鉴权插件
下面所有方法返回值都是布尔值permission代表权限字符串role代表角色字符串复数形式代表数组。 下面所有方法返回值都是布尔值permission 代表权限字符串role 代表角色字符串,复数形式代表数组。
| 方法 | 作用 | 参数 | | 方法 | 作用 | 参数 |
| ----------- | ------------------------------------------ | ----------- | | ----------- | ------------------------------------------ | ----------- |
@ -103,7 +119,7 @@ pnpm install
#### modal - 弹窗插件 #### modal - 弹窗插件
content是消息内容option是详细配置。 content 是消息内容option 是详细配置。
| 方法 | 作用 | 参数 | | 方法 | 作用 | 参数 |
| ------------ | ------------------------------ | ------- | | ------------ | ------------------------------ | ------- |
@ -119,7 +135,7 @@ content是消息内容option是详细配置。
#### bus - 事件插件 #### bus - 事件插件
eventName是事件名称eventFun是事件处理函数请尽量避免事件插件的使用请在组件销毁是解绑素有该组件有关的事件避免产生bug。 eventName 是事件名称eventFun 是事件处理函数,请尽量避免事件插件的使用,请在组件销毁是解绑素有该组件有关的事件,避免产生 bug。
| 方法 | 作用 | 参数 | | 方法 | 作用 | 参数 |
| ----- | ------------ | ------------------- | | ----- | ------------ | ------------------- |
@ -129,99 +145,106 @@ eventName是事件名称eventFun是事件处理函数请尽量避免事件
#### socket #### socket
设置项enableUUID是否启用基于uuid的消息处理机制要求当发送的消息携带uuid字段时返回的消息也要携带uuid字段。 设置项 enableUUID是否启用基于 uuid 的消息处理机制,要求当发送的消息携带 uuid 字段时,返回的消息也要携带 uuid 字段。
设置项enableEvent是否启用基于事件的消息处理机制要求当希望被事件处理函数处理的消息需要携带event字段。 设置项 enableEvent是否启用基于事件的消息处理机制要求当希望被事件处理函数处理的消息需要携带 event 字段。
| 方法 | 作用 | 参数 | | 方法 | 作用 | 参数 |
| --------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | --------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| connect | 连接websocke当连接成功后触发回调函数 | 最简单的用法就是传入{url:"ws://demo"} | | connect | 连接 websocke当连接成功后触发回调函数 | 最简单的用法就是传入{url:"ws://demo"} |
| send | 发送信息当uuid不为空且不为false时当收到携带相同uuid的消息时触发回调函数只触发一次。否则由默认处理函数处理。 | msg消息内容会被处理成json字符串uuid唯一标识符可以手动传入也可以设置为true当为true时会自动生成一个uuid并添加到msg中。 | | send | 发送信息,当 uuid 不为空且不为 false 时,当收到携带相同 uuid 的消息时触发回调函数,只触发一次。否则由默认处理函数处理。 | msg 消息内容,会被处理成 json 字符串 uuid 唯一标识符,可以手动传入,也可以设置为 true 当为 true 时会自动生成一个 uuid 并添加到 msg 中。 |
| close | 关闭连接,会触发回调函数的内容,不会触发默认关闭事件的处理函数,也不会修改默认关闭事件的处理函数。 | 无 | | close | 关闭连接,会触发回调函数的内容,不会触发默认关闭事件的处理函数,也不会修改默认关闭事件的处理函数。 | 无 |
| on | 监听事件当收到携带event的消息时会调用回调函数。 | event事件的名称 | | on | 监听事件,当收到携带 event 的消息时会调用回调函数。 | event 事件的名称 |
| off | 取消监听事件 | | | off | 取消监听事件 | |
| onMessage | 定义默认监听事件 | callback 默认监听事件的处理函数 | | onMessage | 定义默认监听事件 | callback 默认监听事件的处理函数 |
| onError | 定义异常事件 | callback 默认异常事件的处理函数 | | onError | 定义异常事件 | callback 默认异常事件的处理函数 |
| onClose | 定义关闭事件 | callback 默认关闭事件的处理函数 | | onClose | 定义关闭事件 | callback 默认关闭事件的处理函数 |
# 作者建议 # 作者建议
### 对于选项式 ### 对于选项式
```js ```js
this.$tab // 建议使用this.$tab进行页面跳转理由便于在跳转前处理其他事务 this.$tab; // 建议使用this.$tab进行页面跳转理由便于在跳转前处理其他事务
this.$auth // 建议使用this.$auth进行鉴权操作 this.$auth; // 建议使用this.$auth进行鉴权操作
this.$modal // 建议使用this.$modal打开弹窗理由便于以后想要使用自定义弹窗 this.$modal; // 建议使用this.$modal打开弹窗理由便于以后想要使用自定义弹窗
``` ```
### 对于组合式 ### 对于组合式
```js ```js
import tab from '@/plugins/tab' // 建议使用tab进行页面跳转理由便于在跳转前处理其他事务 import tab from "@/plugins/tab"; // 建议使用tab进行页面跳转理由便于在跳转前处理其他事务
import auth from '@/plugins/auth' // 建议使用auth进行鉴权操作 import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
import modal from '@/plugins/modal' // 建议使用modal打开弹窗理由便于以后想要使用自定义弹窗 import modal from "@/plugins/modal"; // 建议使用modal打开弹窗理由便于以后想要使用自定义弹窗
// 也可以使用下面的方式 // 也可以使用下面的方式
import { tab, auth, modal} from '@/plugins' import { tab, auth, modal } from "@/plugins";
``` ```
### 对于ucharts ### 对于 ucharts
建议即便暂时不使用图表也不要删除它,以后可能会用到。 建议即便暂时不使用图表也不要删除它,以后可能会用到。
# 压缩内存 # 压缩内存
(主包最低809kb左右) (主包最低 809kb 左右)
### 删除geek组件 ### 删除 geek 组件
1. 删除pages_geek和components/geek-xd文件夹 1. 删除 pages_geek components/geek-xd 文件夹
2. 删除pages.json中subPackages的root值为“pages_geek/pages”的配置 2. 删除 pages.json subPackages root 值为“pages_geek/pages”的配置
3. 删除pages/template.config.js中geek组件 3. 删除 pages/template.config.js geek 组件
### 去除模板 ### 去除模板
占用主包582kb左右 (占用主包 582kb 左右)
1. 删除pages_template、pages_qiun两个文件夹 1. 删除 pages_template、pages_qiun 两个文件夹
2. 删除pages.json中subPackages的root值为“pages_qiun/pages”、“pages_template/pages”的两个配置 2. 删除 pages.json subPackages root 值为“pages_qiun/pages”、“pages_template/pages”的两个配置
3. 删除pages/template.config.js和pages/template.vue 3. 删除 pages/template.config.js pages/template.vue
4. 删除pages.json中subPackages的“tabBar”中的模板一项和“pages”中模板的一项 4. 删除 pages.json subPackages 的“tabBar”中的模板一项和“pages”中模板的一项
5. 删除static中的uview里面都是示例图片。 5. 删除 static 中的 uview里面都是示例图片。
6. 删除plugins中的config.js和common.js并在plugins/index.js中删除相关配置 6. 删除 plugins 中的 config.js common.js并在 plugins/index.js 中删除相关配置
### 删除uchart ### 删除 uchart
占用主包175kb左右不建议删除以防以后会用 (占用主包 175kb 左右,不建议删除,以防以后会用)
1. 删除components/qiun-data-charts文件夹 1. 删除 components/qiun-data-charts 文件夹
2. 删除pages.json中的easycom下的custom中的"qiun-(.*)"的那一行 2. 删除 pages.json 中的 easycom 下的 custom 中的"qiun-(.\*)"的那一行
3. 删除pages/index中使用 “qiun-data-charts” 的部分 3. 删除 pages/index 中使用 “qiun-data-charts” 的部分
### 删除uview ### 删除 uview
(按需引入,没必要删除) (按需引入,没必要删除)
1. main.js或者main.ts中删除 1. main.js 或者 main.ts 中删除
```js ```js
import uviewPlus from 'uview-plus' import uviewPlus from "uview-plus";
// ...... // ......
app.use(uviewPlus) app.use(uviewPlus);
``` ```
2. uni.scss中删除 @import 'uview-plus/theme.scss'; 2. uni.scss 中删除 @import 'uview-plus/theme.scss';
3. App.vue中删除 @import '@/static/scss/index.scss'; 3. App.vue 中删除 @import '@/static/scss/index.scss';
4. package.json中删除 "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36", 4. package.json 中删除 "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36",
# 功能演示
<image src="./doc/image/template1.png" style="width: 45%; height: 500px;"/>
<image src="./doc/image/template2.png" style="width: 45%;height: 500px;" />
<image src="./doc/image/index.png" style="width: 45%;height: 500px;" />
<image src="./doc/image/mallMenu.png" style="width: 45%;height: 500px;" />
# 附录 # 附录
[Vue3官网](https://cn.vuejs.org/) [Vue3 官网](https://cn.vuejs.org/)
[uniapp官网](https://uniapp.dcloud.net.cn/) [uniapp 官网](https://uniapp.dcloud.net.cn/)
[uView-plus官网](https://uiadmin.net/uview-plus/) [uView-plus 官网](https://uiadmin.net/uview-plus/)
[uCharts官网](https://www.ucharts.cn/v2/#/) [uCharts 官网](https://www.ucharts.cn/v2/#/)
[RuoYi官网](http://ruoyi.vip/) [RuoYi 官网](http://ruoyi.vip/)
**联系我们:** **联系我们:**
QQ交流群744785891 QQ 交流群744785891

BIN
doc/image/index.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
doc/image/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
doc/image/mallMenu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

BIN
doc/image/template1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
doc/image/template2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB