最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【调研】适合vue.js的后台web管理页面框架

Vue crifan 7589浏览 0评论

要求尽量都是单页面 -》 一个地址对应一个页面

关于后台管理页面的框架,之前知道了:

AdminLTE

刚听说有个:layui好像也不错

去看了:

在线示例 – layui

效果还是蛮不错的。

-》

layui后台管理模板

效果很不错。

后台管理UI的选择 – 张果 – 博客园

Metronic还可以

H+ UI好像也可以

INSPINIA 看起来也还行

【记录】学习和折腾Vue.js

看到其他很多不错的:

饿了么前端

-》

ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

vuematerial/vue-material: Material design for Vue.js

vue UI 库 layui vs element ui

看到:

关于Web前端思想、技术、框架、组件的封装与选择 – 简书

整理的不错:

antd的vue版:

Vue的实现:

FE-Driver/vue-beauty: Beautiful UI components build with vue and ant design

但是用的人不多

-》

vue-beauty2

看了看,还是不够好看

另外还有个2年前就停止维护的:

okoala/vue-antd: Vue UI Component & Ant.Design

所以也是废了。

iview/iview: A high quality UI Toolkit built on Vue.js 2.0

iView介绍 – iView

看了看,好像也很不错, 甚至比Element UI还好。

目前结论:

LayUI很简洁和灵活

iview和Element UI貌似都很不错,且都是针对于Vue的。

LayUI:

8000+ star

iView

10000+star

Element UI

18000+ star

抽空好好比较比较这几个。

LayUI vs Element UI vs iView

LayUI 对比 Element UI 对比 iView

VUE UI框架对比 element-ui 与 iView – 个人文章 – SegmentFault

2016我的心路历程:从 Vue 到 Webpack 到 iView – 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客

国内最火的 HTML、CSS、JavaScript 开源项目 -北斗寻

amazeui/amazeui: Amaze UI, a mobile-first and modular front-end framework.

貌似也可以。

去看了demo:

Amaze UI Admin index Examples

虽然不错,但是有点太素了。不够炫。或许是需要换成好的主题就好看了?不管了。

adminlte vue

果然有人折腾过:

devjin0617/vue2-admin-lte: adminLTE to vuejs v2.x converting project

在线demo

vue-admin-lte

liujians/vue-adminLte-vue-router: SPA about vue-cli+adminLte+vue-router

misterGF/CoPilot: Responsive Bootstrap 3 Admin Template based on AdminLTE with vue.js

1500+ star

看起来很不错,而且活跃度不错

在线demo

CoPilot

Vue 整合 AdminLTE 模板指南 | Huanqiang’s 博客

后台管理模版大搜集 都是前后分离的 | elickzhao’s Blog

->

https://github.com/hsuehic/vue-kit

liujians/vue-adminLte-vue-router: SPA about vue-cli+adminLte+vue-router

2017年5月:已不再更新。

Vue整合AdminLTE模板

taylorchen709/vue-admin: admin template based on vuejs2 and element.

2500+ star 

是别人基于 Vue+Element UI,做出来的 后台管理页面模板

效果还不错。

demo地址:

PanJiaChen/vue-element-admin: vue2.0 admin / a management system template

5600+ star

更不错,是基于Vue实现的后台管理页面

后台集成方案

“这半年来一直在用vue写管理后台,目前后台已经有百来个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。”

看了看效果:

Juicy

-》真的很炫酷,功能又多。

而对于想要实现,Vue的后台管理页面,则可以参考:

PanJiaChen/vueAdmin-template: a vue2.0 minimal admin template

500+ star

去写。

手摸手,带你用vue撸后台 系列三(实战篇) – 个人文章 – SegmentFault

这里还有一些其它的框架(只讨论pc端的框架)大家可以自行选择:

  • ivew 一国人个人写的框架,美观度和交互性都不错,有种介于Element和Ant之间的感觉,之前和element团队小小的撕了一下,有兴趣的自己去围观吧,框架还是很不做的,一个人能做出这样,也是很不容易的。作者公开信件

  • vue-admin 也是一个不错的选择,代码写的和不错,官方也出了一个admin的架子,也很值得借鉴

  • vue-material 一个material design vue框架库

  • vuetify 又是一个material design vue框架库

  • Keen-UI 又又是一个material design vue框架库

  • CoreUI-Free-Bootstrap-Admin-Template 和以前的Bootstrap一样,搭好了一个完整的架子,大家可以进行二次拓展,它有vue,react,angular多个版本

vue-bulma/vue-admin: Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3

看了demo

https://admin.vuebulma.com/#/dashboard

但是觉得效果不是那么的美观。

【总结】

关于Vue的UI和后台管理页面模版(admin template)

有针对于AdminLTE做Vue转换的,但是感觉也不是特别的好。

而UI方面,比较很多后,觉得ElementUI算是用的最多的,社区活跃,质量高,显示效果不错。

最主要又找到一个,拿来即用的,丰富功能的模板:

PanJiaChen/vue-element-admin: vue2.0 admin / a management system template

以及作者还有教程供参考。

所以暂时决定:

以这个模板为入手,去学习和借鉴。

所有的资料,都可以从:

简述

http://panjiachen.github.io/vue-element-admin/#/introduction/index

中找到。

不过看到:

Vue 2.0 Admin后台管理模板对比

推荐CoreUI(而不是Vue-Element-admin)

所以去看看:

CoreUI · Open Source Boostrap Admin Template.

demo:

CoreUI – Open Source Bootstrap Admin Template

mrholek/CoreUI-Free-Bootstrap-Admin-Template: CoreUI is free bootstrap admin template with Angular2, AngularJS, React.js & Vue.js support.

->Vue版本

Open Source Vue Admin Template · CoreUI

Vue.js Version · CoreUI

-》

Vue_Full_Project:完整项目

Vue_Starter:供基本的开发使用。

收费的PRO版本,貌似功能是满强大的:

CoreUI · Open Source Boostrap Admin Template.

CoreUI PRO – Bootstrap 4 Admin Template

其中包括有Markdown编辑器,可以提交的按钮等等。

后来去比较了发现:

mrholek/CoreUI-Vue: CoreUI Vue is free Vue admin template based on Bootstrap 4

CoreUI虽然不错,但是有些组件,比如带关闭的tag,好像就没有找到:

Introduction · CoreUI

并且,CoreUI,对于当前多数项目是国内用户,

很多页面和组件的显示效果都不是很适合

比如 分页,登录页面等等,都还是ElementUI更适合国人。

另外发现个vue-element-admin的加分项:

(但是

http://lanyuanxiaoyao.com/2017/07/05/vue-admin/

中没有说的)

PanJiaChen/vueAdmin-template at permission-control

是个模版starter,可以用于开发项目。

-》而无须从复杂的:

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

中去删减很多东西,达到自己要的项目模板的效果了。

另外,如果想要封装为独立的桌面端应用程序,也可以通过Electron:

PanJiaChen/electron-vue-admin: vue electron admin template web

效果也不错。

所以,对于UI框架来说,Core UI也是值得一试的。但是目前看来,此处vue-element-admin更适合作为后台web管理页面的框架。

【总结2】

所以,此处还是先去用Vue的web后台管理页面框架 vue-element-admin

PanJiaChen/vue-element-admin: vue2.0 admin / a management system template

而想要直接拿来作为starter模板来开发的话,作者是提供了 vueAdmin-template

PanJiaChen/vueAdmin-template: a vue2.0 minimal admin template

如果要带权限的,则去permission-control分支:

https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control

另外,如果想要实现桌面端应用,可以用Electron去封装,可以使用 electron-vue-admin

PanJiaChen/electron-vue-admin: vue electron admin template web

https://github.com/PanJiaChen/electron-vue-admin

另外:

bailicangdu/vue2-manage: 基于 vue + element-ui 的后台管理系统

1700+star

也可以下载下来 供参考其中代码

【后记】

后来看到:

Best Vue.js UI component Frameworks And Libraries part 2

-》其中有很多UI

这个:

iview/iview: A high quality UI Toolkit built on Vue.js 2.0

布局 Layout – iView

看起来效果不错,适合用于后台管理页面

另外的:

Mint UI

中的:

看起来不错,抽空试试。

转载请注明:在路上 » 【调研】适合vue.js的后台web管理页面框架

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.166 seconds, using 22.10MB memory