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

 本文首发：《[最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云](https://kalacloud.com/blog/best-vue-js-admin-dashboard/)》 Vue admin 后台管理系统作为每个项目必备的管理后台，对大家来说十分重要。选不好，配不好，不仅现在用着抓狂，未来迭代升级也困难重重，步步是坑。所以在技术选型阶段，就要对市面上主流的 Vue admin 做到全面了解，知道他们的优缺点，再根据自己项目的需求，有针对性的选择。 我试用了市面上所有主流 Vue admin 都 npm 到本地测了一遍，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的 admin 后台，把最好、最有特点的 7 款 Vue admin 挑出来，分享给大家。这些后台各有各的特点，有些功能多样，但整体很重；有些虽然稳定，但上线年头久远，含有大量陈旧功能；有些功能虽然少，但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的 admin 后台系统。 另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用[卡拉云](https://kalacloud.com/)—— 新一代低代码开发工具帮你搭建 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](https://github.com/PanJiaChen/vue-element-admin) 是国内最早也是目前最完善的后台前端解决方案，一定得放在第一个说。作为 Vue admin 解决方案的前辈之一，element admin 的用户众多，社区庞大，无论你在使用中碰到什么问题，到处搜搜，基本上都能找与你碰到类似问题的用户提问及解答。  element admin 基于 Vue + element UI 来实现，内置动态路由，权限管理，i18n （国际化插件），它把典型的业务模型帮你提炼出来，在你需要的业务场景中做到比你想的还要更好，极其丰富的功能组件，是你搭建企业内部后台的好选择。 当然，它的优点也是它的缺点，经过这么多年的迭代，不断的加功能，不断迭代堆积，element admin 稍微有点臃肿，不适合当基础模版来二开，它集成的众多细致功能，会造成不少代码冗余。 Vue element admin 经过时间筛选出来，能活到现在依然活跃是有原因的，如果你刚开始搭建管理后台，推荐你从 Vue element admin 开始试用。作者花裤衩自己写了个教程《[手摸手带你用vue撸后台](https://juejin.cn/post/6844903476661583880)》特别棒，前端萌新可以跟着这个走一遍。 扩展阅读：《[手把手教你Vue3+Node.js+Expres+MySQL环境搭建](https://kalacloud.com/blog/vue-js-node-js-express-mysql-crud-example/)》 ## 二. Antd Pro Vue - 背靠阿里，代码过硬，大型项目首选  2018年3月，蚂蚁正式开源了 Ant Design 的 Vue 版本，几个月后，紧接着发布了这套 Vue 组件库的完整前端脚手架 [Antd Pro Vue](https://pro.antdv.com/)（Vue admin 后台管理系统）。 Antd Pro Vue 作为 Vue admin 后台管理框架，视觉设计上传承了 Antd 的严谨专业。官网文档经过这么多多年的迭代，已经从最开始的粗略版升级至现在涵盖各类问题解决方案的专业好文档。  Antd Pro Vue 从出生那一刻开始就是为复杂业务所建，它不是从简单功能逐渐迭代到复杂功能，而是从一开始设计时，就按照大公司复杂业务来设计，从一个更宏观的视角来有序安排，提炼出各类业务场景做成制式页，不论你是什么独特的业务场景，都可以找到合适自己的，稍加改动即可上线。 ## 三. Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实  [Vue vben admin](https://github.com/vbenjs/vue-vben-admin) 是我一直想推荐的宝藏 admin 后台管理系统，视觉效果一流，功能安排合理。目前基于 Vue3 构建又好用的后台不是太多，Vben admin 基于最新的 Vue3、Vite、Ant-Design-Vue、TypeScript 构建。 Vben 虽然早期版本有些问题，有些地方过度封装，有一些学习成本，但作者迭代的相当快，大多数问题在文档都可以找到并解决。  vben 提供了完整版和2两个不同类型的精简版，毕竟大多数使用者会根据自己的使用场景进行二开，会删掉自己不需要的代码，作者洞察到了这个需求，帮大家完成了这一步。 虽然 vben 文档里描述自己适合做中大型中后台，但 vben 发布时间还比较短，还有挺多升级迭代的路要走，建议谨慎选择。我个人非常看好 vben ，期待它有朝一日，独霸一方。 扩展阅读：《[Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板](https://kalacloud.com/blog/vue-axios-tutorial/)》 ## 四. iView Admin - 老牌 admin 代码工程化 建立生态 高价高品质  2017 年 [iView admin](https://github.com/vbenjs/vue-vben-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 富文本编辑器](https://kalacloud.com/blog/vue-richtext-editor/)》。 iView admin Pro 售价高达 1 万元，它有着商业软件应有的流畅和趁手，这种付费 admin 我找机会单开一篇写个测评，这里不展开了。 扩展阅读：《[最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/)》 ## 五. D2Admin - 趁手 好用 代码工程化 RBAC 权限管理  [D2Admin](https://github.com/d2-projects/d2-admin) 绝对是一款低调又好用的 admin 后端管理系统。它是完全免费开源的企业中后台管理集成方案，在 element-ui 相关的开源项目里，D2 admin 的结构和代码风格顺畅清晰，小于 60kb 的本地首屏 JS 加载，而且 D2 的权限管理遵循 [RBAC 模型](https://kalacloud.com/blog/architect-design-based-on-rbac-kalacloud/)。  D2Admin 使用 Vue-cli3 构建，内置 UEditor [富文本编辑器](https://kalacloud.com/blog/vue-richtext-editor/)，多款主题，分离的路由和菜单设置，可拖拽的页面布局，Fontawesome 图标库以及提供了数据导出另存为 Excel 文件，这对有些数据看板类的项目尤为重要。 扩展阅读：《[最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/)》 ## 六. Naive Ui admin - 基于 Vue3 的后台管理新星 适合小项目  [Naive Ui admin](https://github.com/jekip/naive-ui-admin)是我最近用过特别轻便的一款 Vue admin 中后台管理系统解决方案。它完全免费，可商用。  目前基于 Vue3 有好用的项目并不多，老牌前端框架还在支持 Vue3 的路上，现在支持 Vue3 完成度又高的项目屈指可数，Naive Ui Vue Admin 相对来说，是一个比较完整的项目，虽然有些组件还有待开发，但以目前作者的更新频率来说，应该很快就能赶上。 扩展阅读：《[Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/)》 ## 七. mall admin web - 电商类 Vue admin 后台管理  [mall admin web](https://github.com/macrozheng/mall-admin-web) 主要针对电商垂直场景，开发的电商后台管理系统。mall admin 内置功能主要围绕电商需求展开，商品管理、订单、会员、促销、统计报表、财务管理等有针对性的功能场景展开。 对于快速上线的电商项目，这套系统是非常好的选择，功能全覆盖，简单又直接。  mall admin web 基于 Vue + Element 构建，整个功能分布合理，包含电商的大部分所需，方便大家进行二次开发。作者也写了它的[后端项目 mall](https://github.com/macrozheng/mall)，基于 SpringBoot+MyBatis 实现，采用Docker容器化部署，配合使用更加。 ## 八. admin 管理后台总结及「卡拉云」 本文介绍了我自己用过的 7 款 Vue admin 后台管理系统的特点，大家可以根据自己工作中的实际场景来挑选合适自己的后管系统。 如果你想搭建自己的 admin 后台管理工具，但又不是很熟悉前端，可以考虑使用[卡拉云](https://kalacloud.com/)，**真正开箱即用，无需写任何前端代码，仅需拖拽，即可快速生成适合你项目的 admin 后台管理系统。**  上图为**卡拉云用户根据自己项目情况，搭建的广告投放监测系统，整个搭建过程用时 50 分钟** 卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。**三天的工作量，使用卡拉云后，可缩减至 1 小时，欢迎免费[试用卡拉云](https://kalacloud.com/)。** ## 九. 本文作者 蒋川，卡拉云联合创始人，B 端数据开发。 如果你有任何问题，欢迎添加微信一起交流。我的微 HiJiangChuan 扩展阅读： - [最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/) - [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/) - [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/) - [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/) - [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/) - [PAW 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/paw-tutorial/)