RuoYi-App-Geek

引言

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-Geek生态应运而生。它旨在为广大开发者提供一个既保留原版本核心特性，又整合社区版优点的全新解决方案。在RuoYi-Geek中，我们深入调研了企业开发中常用的RuoYi扩展，并直接在框架中集成，确保开发者能够快速上手，高效开发。同时，我们采用了最新的SpringBoot3+Vue3技术栈，彻底移除了为了兼容Java1.8而保留的老旧方法。更为重要的是，我们为TypeScript开发环境加入了常用的tsconfig.json配置，使得开发者在VSCode等编辑器中能够获得更为舒适、便捷的语法提示体验。

RuoYi-Geek不仅仅是一个简单的升级版本，更是对于RuoYi生态的一次全面优化与整合。我们相信，通过RuoYi-Geek生态，开发者将能够更为高效、愉悦地开发出优秀的企业级应用。

本项目为RuoYi-Geek生态的 RuoYi-App部分。 注意： 本人的其他两个推荐搭配的项目

1. Ruoyi-SpringBoot3-Geek: 这是若依极客生态的后端Springboot3版本 (gitee.com)
2. RuoYi-Vue3-Geek: 这是若依极客生态的Vue3版本 (gitee.com)

与Ruoyi-App相比较

1. 使用UniApp+Vue3的最新框架
2. 支持TS、SCSS、LESS等对js和css的扩充语言
3. 使用Pinia代替Vuex，更加轻巧简单
4. 使用uView-Plus（好看的ui） 代替uView-ui的ui组件库
5. 使用uCharts（方便的图表）画图工具
6. 已经完成了分包操作
7. 提供了颜色选择器、二维码等常用组件
8. 将原有内置工具进行类型标定
9. 分别提供了uview-plus和ucharts的模板（可以直接使用或者用于学习）

快速开始

**注意：**node版本需要16+

安装

一下三种方式均可，感觉速度 pnpm > yarn > cnpm > npm

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

npm install
cnpm install
yarn
pnpm install

启动

1. 将项目下载到本地
2. 初始化项目---进入项目根路径运行指令初始化项目 npm install
3. 运行项目---进入项目根路径运行指令（在package.json能找到所有指令）： 以微信小程序为例：npm run dev:mp-weixin 以H5为例 npm run dev:h5
4. 查看项目 以微信小程序为例： 打开微信开发者工具，导入项目路径 dist\dev\mp-weixin 以H5为例：打开浏览器，输入控制台输出的地址 注：公众号属于H5，以微信公众号为例，打开微信开发者工具，输入控制台输出的地址
5. 打包项目---进入项目根路径运行指令（在package.json能找到所有指令）： 以微信小程序为例：npm run build:mp-weixin 以H5为例： npm run build:h5

代码压缩

默认是启动代码压缩的，

如果需要关闭代码压缩，可以将vite.config.js中的build.minify赋值为false。

如果需要打开代码压缩，可以将vite.config.js中的build.minify赋值为true。

内置组件(geek-xd)

1. 颜色选择器组件
2. 二维码组件
3. 圆形菜单组件
4. 常用的订单组件
5. 信息展示组件

插件的使用

tab - 页面插件

可以通过设置参数中的config.data来实现页面传参

方法	作用	参数
getData	可以拿到上个页面通过tab传递的参数	无
reLaunch	关闭所有页面，打开到应用内的某个页面	url、config
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面	url、config
redirectTo	关闭当前页面，跳转到应用内的某个页面	url、config
navigateTo	保留当前页面，跳转到应用内的某个页面	url、config
navigateBack	关闭当前页面，返回上一页面或多级页面	config

auth - 鉴权插件

下面所有方法返回值都是布尔值，permission代表权限字符串，role代表角色字符串，复数形式代表数组。

方法	作用	参数
hasPermi	验证用户是否具备某权限	permission
hasPermiOr	验证用户是否含有指定权限，只需包含其中一个	permissions
hasPermiAnd	验证用户是否含有指定权限，必须全部拥有	permissions
hasRole	验证用户是否具备某角色	role
hasRoleOr	验证用户是否含有指定角色，只需包含其中一个	roles
hasRoleAnd	roles	roles

modal - 弹窗插件

content是消息内容，option是详细配置。

方法	作用	参数
msg	消息提示	content
msgError	错误消息	content
msgSuccess	成功消息	content
hideMsg	隐藏消息	无
alert	弹出提示	content
confirm	确认窗体	content
showToast	提示信息	option
loading	打开遮罩层，需要手动关闭遮罩层	content
closeLoading	关闭遮罩层	无

bus - 事件插件

eventName是事件名称，eventFun是事件处理函数，请尽量避免事件插件的使用，请在组件销毁是解绑素有该组件有关的事件，避免产生bug。

方法	作用	参数
$on	绑定一个事件	eventName、eventFun
$off	解绑一个事件	eventName
$emit	触发一个事件	eventName、...args

socket

设置项enableUUID，是否启用基于uuid的消息处理机制，要求当发送的消息携带uuid字段时，返回的消息也要携带uuid字段。

设置项enableEvent，是否启用基于事件的消息处理机制，要求当希望被事件处理函数处理的消息需要携带event字段。

方法	作用	参数
connect	连接websocke，当连接成功后触发回调函数	最简单的用法就是传入{url:"ws://demo"}
send	发送信息，当uuid不为空且不为false时，当收到携带相同uuid的消息时触发回调函数，只触发一次。否则由默认处理函数处理。	msg消息内容，会被处理成json字符串uuid唯一标识符，可以手动传入，也可以设置为true当为true时会自动生成一个uuid并添加到msg中。
close	关闭连接，会触发回调函数的内容，不会触发默认关闭事件的处理函数，也不会修改默认关闭事件的处理函数。	无
on	监听事件，当收到携带event的消息时会调用回调函数。	event事件的名称
off	取消监听事件
onMessage	定义默认监听事件	callback 默认监听事件的处理函数
onError	定义异常事件	callback 默认异常事件的处理函数
onClose	定义关闭事件	callback 默认关闭事件的处理函数

作者建议

对于选项式

this.$tab // 建议使用this.$tab进行页面跳转，理由：便于在跳转前处理其他事务
this.$auth // 建议使用this.$auth进行鉴权操作
this.$modal // 建议使用this.$modal打开弹窗，理由：便于以后想要使用自定义弹窗

对于组合式

import tab from '@/plugins/tab' // 建议使用tab进行页面跳转，理由：便于在跳转前处理其他事务
import auth from '@/plugins/auth' // 建议使用auth进行鉴权操作
import modal from '@/plugins/modal' // 建议使用modal打开弹窗，理由：便于以后想要使用自定义弹窗

// 也可以使用下面的方式
import { tab, auth, modal} from '@/plugins'

对于ucharts

建议即便暂时不使用图表也不要删除它，以后可能会用到。

压缩内存

(主包最低809kb左右)

删除geek组件

1. 删除pages_geek和components/geek-xd文件夹
2. 删除pages.json中subPackages的root值为“pages_geek/pages”的配置
3. 删除pages/template.config.js中geek组件

去除模板

（占用主包582kb左右）

1. 删除pages_template、pages_qiun两个文件夹
2. 删除pages.json中subPackages的root值为“pages_qiun/pages”、“pages_template/pages”的两个配置
3. 删除pages/template.config.js和pages/template.vue
4. 删除pages.json中subPackages的“tabBar”中的模板一项和“pages”中模板的一项
5. 删除static中的uview，里面都是示例图片。
6. 删除plugins中的config.js和common.js，并在plugins/index.js中删除相关配置

删除uchart

（占用主包175kb左右，不建议删除，以防以后会用）

1. 删除components/qiun-data-charts文件夹
2. 删除pages.json中的easycom下的custom中的"qiun-(.*)"的那一行
3. 删除pages/index中使用 “qiun-data-charts” 的部分

删除uview

（按需引入，没必要删除）

1. main.js或者main.ts中删除

import uviewPlus from 'uview-plus'
// ......
app.use(uviewPlus)

2. uni.scss中删除 @import 'uview-plus/theme.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",

附录

Vue3官网； uniapp官网； uView-plus官网； uCharts官网； RuoYi官网；

联系我们：

QQ交流群：744785891