我重构了RuoYi

2,426 阅读2分钟

简介

最近一直在研究Vben5 Admin这个项目,github高居28K的star,但是网上对其褒贬不一,有的说非常好用,有的说过度封装。但是我觉得他的UI界面是真的不错,功能也比较丰富。而且二次封装的vxetable、表单等组件如果你熟悉之后开发一个正常的页面非常的快,公司一直用的RuoYi分离的版本。始终觉的他这个后台管理页面有点丑,于是就有了基于Vben5 Admin进行重构前端的想法,断断续续大概耗时一个月左右的时间,有需要的JYM可以看看ruoyi-vue-vben5,当前能顺便给个star就更好了。

提示

该仓库使用vben最新版本v5对若依前端项目进行了全部重写

项目参考了RuoYi-Vue-Plus,需要多租户的可移步

v5版本采用分仓(包)目录结构, 具体开发路径为: 根目录/apps/web-ele

简介

基于 vben5 & element-plus 的 RuoYi-Vue 前端项目

组件/框架版本
vben5.5.3
element-plus4.2.6
vue3.5.13

后端项目地址 RuoYi-Vue

文档

Vben V5 文档地址

预览图

image-20250428152753496.png

image-20250428152834187.png

image-20250428152851012.png

image-20250428152930200.png

image-20250428153007483.png

安装使用

前置准备环境(只能用pnpm)

"packageManager": "pnpm",
"engines": {
  "node": ">=20.15.0",
  "pnpm": "latest"
},
  • 获取项目代码
git clone https://gitee.com/laughingyou/ruoyi-vue-vben5.git
  • 安装依赖
cd ruoyi-vue-vben5
​
pnpm install
  • 菜单图标替换

参考 菜单图标替换

  • 关于代码生成

V5版本代码生成模板

  • 还是使用的若依老接口,所以生成的还是vue2版本的代码,需要的可以自行重写开发!!!
  • 运行
pnpm dev:ele
  • 打包
pnpm build:ele

Git 贡献提交规范

  • 参考 vue 规范 (Angular)

    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

浏览器支持

最低适配应该为Chrome 88+以上浏览器 详见 css - where

本地开发推荐使用Chrome 最新版本浏览器

支持现代浏览器, 不支持 IE