Vue 2.0 Admin后台管理模板对比
LanyuanXiaoyao's Blog ヽ(✿゚▽゚)ノ

Vue 2.0 Admin后台管理模板对比

2017-07-05
Vue

说明

我这边后台想快速使用一些后台管理的模板来构建应用,因为Vue成熟较晚,所以也是尽可能找到一些成熟的模板来使用,仅以此作为记录。
事实上Vue出现的时间也并不长,所以网上针对Vue的一些项目都还很少,以Demo居多,对于想直接使用模板来构建应用的人来说实在是有很大的障碍,当然这也不是说我们就是想直接用模板而懒得自己设计,只是公司需要用在实际环境的时候,还是希望能快速构建然后再慢慢完善,所以模板项目的重要性不言而喻,我在学习Vue的过程中也发现这方面的开源项目比较匮乏,希望以后可以把自己这边的框架开源出去给大家参考使用。

Vue.js框架

  • vue-admin
  • GenesisUI
  • vue-element-admin
  • COREUI
  • sls-admin

vue-admin(Star 4876)

官网

https://admin.vuebulma.com/#/
Github:https://github.com/vue-bulma/vue-admin

分析

提供了基本的面板和一些整合的组件,完成度很高,并且提供了响应式布局,包括手机和web的布局

Github提交情况:最近的一次提交在8天前,是一个仍然在维护的模板,应无影响较大的bug

COREUI(Star 3227)

官网

http://coreui.io/
Github:https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template

分析

这个网站提供了专业的模板,并且对同一个模板提供了包括Vue、React和Angular的实现,主题风格总共提供了8个,同时也提供了各个终端(手机,平板,PC)的响应式界面,组件的样式实现和功能都比较完整。

vue-element-admin(Star 2524)

官网

http://panjiachen.github.io/vue-element-admin/#/dashboard
Github:https://github.com/PanJiaChen/vue-element-admin

分析

这个模板同样使用了Element UI框架,整合实现了包括登录,权限验证,侧边栏,编辑器,列表拖拽等实用功能,一些操作动画效果也实现得比较完整

sls-admin(Star 506)

官网

https://vue2.slsadmin.sailengsi.com/
Github:https://github.com/sailengsi/sls-admin

分析

此项目是一个后台管理系统,里面有完整并且实际的增删改查功能,有普通模式操作,也有高级模式操作,用此项目,可以快速帮您完成后台功能。 此项目重点突出在于架构模式,相比那些有很多页面,但架构混乱的项目来说,一个真正的前端应该更在意项目的架构。

这个模板也使用了Element UI框架来绘制页面元素,提供了一个不完善的文档,是对内置功能的一些描述,包括登录注销等操作提供了实现。似乎是如它自己的介绍所说,这个项目提供的是一个项目结构的模板,所以界面上没有什么可看的。
没有提供响应式界面和移动端UI

筛选

注意!这里的筛选是根据我工作时候的项目选定的,个人建议,仅供参考

这次进行对比的是筛选出来的三个基于Vue的admin管理模板
分别为

  1. CoreUI
  2. Vue-admin
  3. Vue-Element-admin

对比

  CoreUI Vue-admin Vue-Element-admin
是否提供自风格组件
提供组件数量
是否提供统计图表整合
是否收费
是否提供源码 是(包括收费的)
UI框架 BootStrap-vue Element
代码 简洁,使用了简单明了的语法,并且提供了去掉所有组件的UI模板的start工程 使用语法复杂,不易,工程结构庞大,使用了非常多的第三方依赖 工程结构简单,使用了通用的工程结构简洁明了
是否提供文档 有(附带搭建教程和组件开发教程)
是否提供响应式界面(PC端移动端自适应)

注: CoreUI提供了收费版本的完整源码,试运行时亦无任何限制

总结

推荐使用CoreUI,理由如下:

  1. 工程结构简单清晰,没有使用高级语法,相比起Vue-admin,其中组合了大量的自定义的组件,包括UI组件亦是自己开发的,并且工程的代码里弯弯绕绕比较多,比如动态生成侧边栏目录,还有一些别的我看不太懂,比较难上手,随着项目的深入,加入类似的功能也并无不可,只是起步比较难。
  2. CoreUI提供了一个start工程,其中只保留了header,footer,sidebar等基本组件,其他的代码均已去掉,省去了配置的麻烦,而又避免了其他演示代码的干扰(其他框架都是只提供演示版本的工程,其中很多辅助性的代码我们用不上)
  3. CoreUI使用了Bootstrap-vue UI框架,个人感觉和Element比较契合,Element的组件风格和Vue-admin相去甚远

评论