Admin后台管理系统UI框架选型--Vue版

一月 08, 2020

vue admin manage element iview

对于前端来说，想快速构建一个后台管理系统界面，首先需要选择js框架，然后就要选择相应的UI框架。基于Vue的优秀表现和良好的生态这里我们选择Vue.js作为js框架。

本篇文章主要介绍基于Vue的后台管理UI框架。

vue-element-admin ★ star 47.7K

Github：https://github.com/PanJiaChen/vue-element-admin

Preview：https://panjiachen.github.io/vue-element-admin

如果你在GitHub上搜索vue admin，vue-element-admin以4万多的star数量遥遥领先。这也能看出在基于Vue的前端开发中Element框架的热度。Element，是饿了么公司维护的，一套基于 Vue 2.0 的桌面端组件库。vue-element-admin 则是基于 vue 和 element-ui实现的一个后台前端解决方案。它使用了最新的前端技术栈，内置 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

element

技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui

评价：企业级后台应用快速成型工具，出色的后台管理系统框架，文档丰富，社区活跃。所有的请求数据都使用Mock.js进行模拟。从Git上clone代码后，可直接填内容即可，方便快捷。

iview-admin ★ star 14K

Github：https://github.com/iview/iview-admin

Preview：https://admin.iviewui.com/

Vue的两大UI框架iView和Element的战争仿佛是在iView更名View UI并提出收费版后差距越来越大。iView的团队基于iView组件库开发了相应的Admin项目，也是后台前端解决方案，同时还有Admin Pro收费版。2019年10月iView 4.0发布，超过50项更新，Github地址也进行了迁移https://github.com/view-design/ViewUI

iview

评价：iView组件更符合Vue开发模式，如果你之前使用React开发要切换到Vue，iView用起来会更顺手，但是数据量大情况下的性能问题，相关BUG解决速度慢等问题，也一直令使用者头大。作者已经成立了公司全职维护iView以及相关生态，也保证1-2周就会迭代一个版本，希望可以有更好的发展。

d2-admin ★ star 7.8k

Github：https://github.com/d2-projects/d2-admin

Preview：https://d2.pub/d2-admin/preview/

D2Admin 是一个完全开源免费的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。

d2admin

评价：基于ElementUI的D2Admin 在后台管理系统上一定要拥有姓名，看多了中规中矩的后台管理系统，D2Admin 的出现堪称惊艳。顶部菜单栏同步左侧菜单栏、全局菜单搜索都是一个庞大后台管理系统不可或缺的功能，D2Admin在这方面的工作做得十分出色。

vue-manage-system ★ star 8.9k

Github：https://github.com/lin-xin/vue-manage-system

Preview：https://lin-xin.gitee.io/example/work/

基于 Vue + Element UI 的后台管理系统解决方案。该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

manage

评价：8.9K的Star数量足以说明该方案的关注度和持续更新能力还是不错的。其中不包含业务代码，相对简单。功能虽不多，但勉强够用。系统界面美观，更新活跃，可以选择。

vue2-manage ★ star 8.5k

Github：https://github.com/bailicangdu/vue2-manage

Preview：http://cangdu.org/manage/#/

此项目也是Vue + Element UI 构建的后台管理系统，是后台项目node-elm 的管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登陆、管理数据、权限验证等功能。

评价：该项目主要以饿了么后台管理系统的业务逻辑为主，有配套的前端移动端解决方案、后台系统解决方案以及原生APP项目，后台系统基于Nodejs+Mongodb搭建。逻辑以商铺管理、用户管理、订单管理为主，类似需求可直接套用该解决方案，方便快捷。

查看评论