后台管理系统,前端框架用什么最好?

后台管理系统,前端框架用什么最好?

之前在博客中写了 Vue 中后台管理系统的“系统性”测评,与其它(目前的)高赞答案不一样,我们是真正一个个包跑了一遍 npm install ,一一测过之后写的评测,而不是在 github 上按点赞排序直接爽文。写这篇文章花了大量大量的时间,如果觉得有帮助请点个赞再走,如果有问题欢迎直接问我

首先,后台管理系统的前端框架不存在“好不好”的问题,更多的是你的公司技术栈是不是允许。比如,如果你整个公司选型用 Angular 或者 React,难道你真能另辟蹊径用一个 Vue 的框架吗?

鉴于在国内,Vue 的使用量大概是 React 的 4倍左右(npm trends数据),这篇文章里我们就主要讨论 Vue admin 的后台系统。如果你对 React 的感兴趣,欢迎留言,之后补上

同时如果你需要做技术选型,马上就要开始用上一套后台管理系统,但其实并没有锁死到具体的框架上,我自荐由我一笔一画写出来的卡拉云,帮你省掉前后端二次开发,直接拖拽开发一个后台系统。是的,我也是程序员我当然知道你在想:拖拽能有什么灵活性?但事实上,逻辑的实现是需要用简单的 JavaScript 来黏合的,同时如果有数据处理的逻辑,可以直接在执行 SQL,所以是不是真能打欢迎试用后告诉我 :)

关于卡拉云的介绍请看本文最后

原文发布在:

正文如下:

我试用了市面上所有主流 Vue admin 都 npm 到本地测了一遍,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的 admin 后台,把最好、最有特点的 7 款 Vue admin 挑出来,分享给大家。这些后台各有各的特点,有些功能多样,但整体很重;有些虽然稳定,但上线年头久远,含有大量陈旧功能;有些功能虽然少,但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的 admin 后台系统。

本文测评的 7 款 Vue admin 后台管理系统

Vue element admin 是国内最早也是目前最完善的后台前端解决方案,一定得放在第一个说。作为 Vue admin 解决方案的前辈之一,element admin 的用户众多,社区庞大,无论你在使用中碰到什么问题,到处搜搜,基本上都能找与你碰到类似问题的用户提问及解答。

当然,它的优点也是它的缺点,经过这么多年的迭代,不断的加功能,不断迭代堆积,element admin 稍微有点臃肿,不适合当基础模版来二开,它集成的众多细致功能,会造成不少代码冗余。

Vue element admin 经过时间筛选出来,能活到现在依然活跃是有原因的,如果你刚开始搭建管理后台,推荐你从 Vue element admin 开始试用。作者花裤衩自己写了个教程《手摸手带你用vue撸后台》特别棒,前端萌新可以跟着这个走一遍。

注意,Vue Element Admin 最大的一个问题可能是虽然它的社区足够大,但并没有再频繁更新,可能是主作者工作繁忙导致。因此如果碰上问题,或者需要作者的 bug-fix 不见得是个好选择

扩展阅读:《手把手教你Vue3+Node.js+Expres+MySQL环境搭建》

2018年3月,蚂蚁正式开源了 Ant Design 的 Vue 版本,几个月后,紧接着发布了这套 Vue 组件库的完整前端脚手架 Antd Pro Vue(Vue admin 后台管理系统)。

Antd Pro Vue 作为 Vue admin 后台管理框架,视觉设计上传承了 Antd 的严谨专业。官网文档经过这么多多年的迭代,已经从最开始的粗略版升级至现在涵盖各类问题解决方案的专业好文档。

Antd Pro Vue 从出生那一刻开始就是为复杂业务所建,它不是从简单功能逐渐迭代到复杂功能,而是从一开始设计时,就按照大公司复杂业务来设计,从一个更宏观的视角来有序安排,提炼出各类业务场景做成制式页,不论你是什么独特的业务场景,都可以找到合适自己的,稍加改动即可上线。

Vue vben admin 是我一直想推荐的宝藏 admin 后台管理系统,视觉效果一流,功能安排合理。目前基于 Vue3 构建又好用的后台不是太多,Vben admin 基于最新的 Vue3、Vite、Ant-Design-Vue、TypeScript 构建。

Vben 虽然早期版本有些问题,有些地方过度封装,有一些学习成本,但作者迭代的相当快,大多数问题在文档都可以找到并解决。

vben 提供了完整版和2两个不同类型的精简版,毕竟大多数使用者会根据自己的使用场景进行二开,会删掉自己不需要的代码,作者洞察到了这个需求,帮大家完成了这一步。

虽然 vben 文档里描述自己适合做中大型中后台,但 vben 发布时间还比较短,还有挺多升级迭代的路要走,建议谨慎选择。我个人非常看好 vben ,期待它有朝一日,独霸一方。

扩展阅读:《Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板》

2017 年 iView admin 刚发布时,国内各类 Vue UI 框架都刚起步,还没有现在这种头部一家独大的局面。当时正好在 V2EX 看到相关信息,试了试很喜欢,经过这么多年,现在已经迭代多个版本,并且在 2019年发布了 iView admin pro 版,我来说说这两个版本。

iView admin 基于 Vue + iView UI 组件库构建的后台管理解决方案,它作为 iView 生态上的成员之一,遵循 iView 设计逻辑,风格统一。iView 组件很符合 Vue 开发模式,如果你同时也很熟悉 React ,那么切到 Vue ,使用 iView 也会更容易适应。但这个 admin 基础版对数据量较大的情况,处理的不是很好,把它当作轻便的基础 admin 使用更合适。

iView 在 2019 年推出了全系列 Pro 版本之后,对基础版的维护和更新就很少了,不过我仍然觉得基础版现在的状态,用在自己的小项目中,边用边学习是不错的选择。

iView admin Pro 在基础版的基础上有很多重大升级,对各类应用场景都做了细致的支持。另外 pro 对 PC 端和移动端做了非常好的自适应处理。Pro 版内置了 Quill 富文本编辑器,我自己也超爱 Quill,它非常简洁,没有多余功能,特别是对代码书写极其友好,具体可以看我写的这篇《最好用的 7 款 Vue 3 富文本编辑器》。

iView admin Pro 售价高达 1 万元,它有着商业软件应有的流畅和趁手,这种付费 admin 我找机会单开一篇写个测评,这里不展开了。

D2Admin 绝对是一款低调又好用的 admin 后端管理系统。它是完全免费开源的企业中后台管理集成方案,在 element-ui 相关的开源项目里,D2 admin 的结构和代码风格顺畅清晰,小于 60kb 的本地首屏 JS 加载,而且 D2 的权限管理遵循 RBAC 模型。

D2Admin 使用 Vue-cli3 构建,内置 UEditor 富文本编辑器,多款主题,分离的路由和菜单设置,可拖拽的页面布局,Fontawesome 图标库以及提供了数据导出另存为 Excel 文件,这对有些数据看板类的项目尤为重要。

扩展阅读:《RBAC 权限设计实战 - 用户权限设计从入门到精通》

Naive Ui admin 是我最近用过特别轻便的一款 Vue admin 中后台管理系统解决方案。它完全免费,可商用。

目前基于 Vue3 有好用的项目并不多,老牌前端框架还在支持 Vue3 的路上,现在支持 Vue3 完成度又高的项目屈指可数,Naive Ui Vue Admin 相对来说,是一个比较完整的项目,虽然有些组件还有待开发,但以目前作者的更新频率来说,应该很快就能赶上。

mall admin web 主要针对电商垂直场景,开发的电商后台管理系统。mall admin 内置功能主要围绕电商需求展开,商品管理、订单、会员、促销、统计报表、财务管理等有针对性的功能场景展开。

对于快速上线的电商项目,这套系统是非常好的选择,功能全覆盖,简单又直接。

卡拉云是在 reactive programming 的思路上实现的后台系统开发工具,在卡拉云中你可以任意定制插件(比如输入框,按钮,文本框,表格,地图,图表等),同时用 JS 来定义逻辑,这就避免了很多零代码平台的完全拖拽但缺乏灵活性的操作。简单来说,卡拉云等于一个靠谱程序员给你写好了

而你需要做的,就是配合产品经理把逻辑梳理清楚,拖拽组件把需求实现,再用 SQL 和 JS 把逻辑连接清楚就可以了,省下来的时间去做点自己喜欢做的项目或者自娱自乐都可以,把琐碎的后台系统开发留给产品和我们 :)

以下是一个用卡拉云实现的订单发货系统的小视频,如果需要了解更多,欢迎访问卡拉云