最好用的 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

扩展阅读:

目录
相关文章
|
14天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
130 2
|
12天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
138 11
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
565 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
108 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
241 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
375 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
213 1
|
4月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
72 1
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
316 0