基于vue3.3 + vite4.3 + pinia + unocss +ant-design-vue v4的开源通用后台管理系统

1,152 阅读3分钟

背景

之前一直想开发一套自己的前端通用后台管理系统,因为工作的原因,一直没有时间去做,最近不是很忙了以后,也开始着手去开发这套后台管理系统。

技术栈

之前参考了很多开源的框架,在封装上都做的很不错,像element-plus、naive-ui、acro-design等等,都有一些比较成熟的前端后台管理框架,恰逢其时,正好ant-design-vue正在重构v4版本对标ant-design react版本的v5版本,我也积极参与了重构开发,并有幸加入了ant-design-vue的核心团队。 所以最终我确定了使用ant-design-vue的v4版本来临摹一套react版本的pro后台管理。

主要运用到的技术栈:

  • ant-design-vue@4
  • pnpm workspace模式
  • nitro作为mock服务(低侵入)
  • unocss原子化的css工具
  • vue3.3
  • vite4.2.x
  • pinia
  • typescript
  • eslint
  • auto-import
  • axios
  • vueuse

特点

我们采用的是pnpm的多包管理模式进行开发的,所以我们的项目目前依赖pnpm,在使用前需要安装pnpm才能使用。

我们没有采用复杂的mock服务来做为前端的测试数据服务,我们直接通过nitro作为我们的前端mock服务来实现的,模拟更真实的后端请求环境,当然我们使用nitro的好处是侵入工程小,想要替换我们的mock服务,只需要替换好接口后直接删除server文件夹就完成替换,基本是无侵入式的使用方式。

我们内置提供了一套多主题的解决方案,你可以根据自己的需求去定制项目需要的主题,代码也是完全开源的,可以根据自己的项目需求进行定制开发。

开发

我们提供了详细的开发文档,大家可以直接去参考我们的开发文档,这里就不在赘述了antdv-pro-docs

计划

目前已经完成了前端基础框架的搭建,已经可以运用到项目中了,遇到问题可以issue,也可以加入我们的antdv-pro的前端交流群一起学习交流。

后续的计划:

  1. 业务组件开发 -(进行中)
  2. nestjs后台开发 -(今年计划)
  3. php后台开发 - (今年计划)
  4. java后台开发

这是我们今年的计划,现在正在进行中的是开发一套类似pro-components的表单和表格,预计会在第三季度末会集成到工程中,nestjs和php后台会同步进行,预计会在第四季度末完成开发。

特别鸣谢

项目在开发的过程中,参考了一部分框架的实现,特别鸣谢各个开源项目给我们的灵感,排名不分先后。

参与贡献

如果大家对我们的工程项目感兴趣,可以参与到我们工程的开发中来,让我们共同努力,将整个项目工程做的更好、更完善。期待你的加入。

QQ群:939791772

wx: aibayanyu2022

支持

如果您觉得这个项目对您有帮助,

您可以给我们的项目点一个小星星antdv-pro⭐️

您也可以通过赞助的方式来支持我们。

您的支持是我们做开源最大的动力~