最好用的 7 款 Vue admin 后台管理系统测评

简介: Vue admin 后台管理系统作为每个项目必备的管理后台,对大家来说十分重要。选不好,配不好,不仅现在用着抓狂,未来迭代升级也困难重重,步步是坑。所以在技术选型阶段,就要对市面上主流的 Vue admin 做到全面了解,知道他们的优缺点,再根据自己项目的需求,有针对性的选择。我试用了市面上所有主流 Vue admin 都 npm 到本地测了一遍,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的 admin 后台,把最好、最有特点的 7 款 Vue admin 挑出来,分享给大家。这些后台各有各的特点,有些功能多样,但整体很重;有些虽然稳定,但上线年头久远,含有大量陈旧功能;有些功能

最好用的 7 款 Vue admin 后台管理系统测评

本文首发:《最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云

Vue admin 后台管理系统作为每个项目必备的管理后台,对大家来说十分重要。选不好,配不好,不仅现在用着抓狂,未来迭代升级也困难重重,步步是坑。所以在技术选型阶段,就要对市面上主流的 Vue admin 做到全面了解,知道他们的优缺点,再根据自己项目的需求,有针对性的选择。

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

另外,这个世界已经悄然发生变化,现在根本无需写任何前端代码,直接使用卡拉云—— 新一代低代码开发工具帮你搭建 admin 后台管理系统。无需部署安装、一键接入数据库及 API,前端仅需简单拖拽,即可按照你的需求,随心所欲搭建适合任何应用场景的 admin 后台系统。原来三天的工作量,现在 1 小时搞定,谁用谁知道,用上早下班,详见本文文末。

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

  • Vue element admin - 老牌 admin 后台管理 求稳首选
  • Antd Pro Vue - 背靠阿里,代码过硬,大型项目首选
  • Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实
  • iView Admin - 老牌 admin 代码工程化 建立生态 高价高品质
  • D2Admin - 趁手 好用 代码工程化 RBAC 权限管理
  • Naive Ui admin - 基于 Vue3 的后台管理新星 适合小项目
  • mall admin web - 电商类 Vue admin 后台管理
  • 卡拉云 - 新一代低代码开发工具,无需部署,无需任何前端技术,随心所欲搭建属于你的 admin 后台

一. Vue element admin - 老牌 admin 后台管理 求稳首选

Vue-element-admin

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

Vue-element-admin

element admin 基于 Vue + element UI 来实现,内置动态路由,权限管理,i18n (国际化插件),它把典型的业务模型帮你提炼出来,在你需要的业务场景中做到比你想的还要更好,极其丰富的功能组件,是你搭建企业内部后台的好选择。

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

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

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

二. Antd Pro Vue - 背靠阿里,代码过硬,大型项目首选

Antd-Pro-Vue

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

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

Antd-Pro-Vue

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

三. Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实

Vue-vben-admin

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

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

Vue-vben-admin

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

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

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

四. iView Admin - 老牌 admin 代码工程化 建立生态 高价高品质

iView-Admin

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

iView-Admin-rich

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

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

iView-Admin-pro-rich

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

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

扩展阅读:《最好的 6 个免费天气 API 接口对比测评

五. D2Admin - 趁手 好用 代码工程化 RBAC 权限管理

D2Admin

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

D2Admin-rich

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

扩展阅读:《最好的 5 款翻译 API 接口对比测评

六. Naive Ui admin - 基于 Vue3 的后台管理新星 适合小项目

Naive-Ui-Vue-Admin

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

Naive-Ui-Vue-Admin

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

扩展阅读:《Postman 使用教程 - 手把手教你 API 接口测试

七. mall admin web - 电商类 Vue admin 后台管理

mall-admin-web

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

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

mall-admin-web

mall admin web 基于 Vue + Element 构建,整个功能分布合理,包含电商的大部分所需,方便大家进行二次开发。作者也写了它的后端项目 mall,基于 SpringBoot+MyBatis 实现,采用Docker容器化部署,配合使用更加。

八. admin 管理后台总结及「卡拉云」

本文介绍了我自己用过的 7 款 Vue admin 后台管理系统的特点,大家可以根据自己工作中的实际场景来挑选合适自己的后管系统。

如果你想搭建自己的 admin 后台管理工具,但又不是很熟悉前端,可以考虑使用卡拉云真正开箱即用,无需写任何前端代码,仅需拖拽,即可快速生成适合你项目的 admin 后台管理系统。

kalacloud
上图为卡拉云用户根据自己项目情况,搭建的广告投放监测系统,整个搭建过程用时 50 分钟

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。三天的工作量,使用卡拉云后,可缩减至 1 小时,欢迎免费试用卡拉云

九. 本文作者

蒋川,卡拉云联合创始人,B 端数据开发。

如果你有任何问题,欢迎添加微信一起交流。我的微 HiJiangChuan

扩展阅读:

目录
相关文章
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
11天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发