修改文件: _posts/2016-06-24-vue-ui.md

Author: lanyuanxiaoyao

_posts/2016-06-24-vue-ui.md

@@ -0,0 +1,133 @@
+---
+layout: post
+title: Vue2.0 UI框架对比
+date: 2017-06-24 08:29
+categories: Vue
+tags: [Vue,框架,UI]
+---
+
+* content
+{:toc}
+
+# 简介
+Vue UI框架即通过预制的组件达到快速实现精美页面显示效果的框架，减少页面风格的不统一，同时预制了很多的常用组件，如按钮，输入框，文本框，还有一些动画和特效。  
+UI框架主要以编写CSS样式提供统一风格的组件为主要任务，所以比起功能性的框架，如Vue本身，UI框架会比较简单，所以网上的UI框架相对较多，因此筛选起来，主要按照以下几点来判断：
+- 组件数量  
+如果组件数量少的话，那么就会面临想要实现某个功能的时候找不到对应的组件，这样的UI框架不完整，不能覆盖到网站的方方面面，影响较大
+- 知名度  
+一个优秀的公开的项目应该会有比较热闹的社区，和热衷于使用和研究它的网友，这意味着在遇到使用上的问题的时候会比较容易得到帮助
+- 可延续性  
+UI风格定下来之后就不会轻易改动，如果一个框架不能在未来的几年内都保持更新和开发的话，那么即使遇到了bug也不会得到修复，就会很糟糕
+- 网络评价  
+因为我对前端的了解和对Vue的了解都有限，所以无法直接从框架上看出一些只有深入使用才能发现的问题，比如某些结合数据绑定才会出现的bug，或者某些高级功能冲突之类的bug，所以只能广泛地看一下网友的评论，来判断框架的一些优劣
+- 其他
+就是除了框架本身之外的一些东西，如果有的话
+
+我收集到的的框架有
+- iView
+- Element
+- VueStrap
+- Keen UI
+- Vue-Blu
+- Muse-UI
+
+下面会逐一尝试介绍一下
+
+# iView
+## 官网
+[https://www.iviewui.com/](https://www.iviewui.com/)
+GitHub：[https://github.com/iview/iview](https://github.com/iview/iview)
+## 组件
+总共是6大类共46类组件，包括了常用的按钮，表单，输入框，提醒等各种组件，可以说是非常完整了，组件的丰富和完整就不用多说了，要用的基本都有
+## 知名度/可延续性
+由于国产+完整的组件库，所以iView的名字经常被提及，百度前几页基本上都有被拿出来讲，但是由于是2016年年末才推出的框架，被用于实际开发的项目很少，即使在官网上用来做例子的也只有一款自家的后台。 
+这个框架是由[TalkingData](https://www.talkingdata.com/)公司制作，并用于自家的网站上，这个公司还有一个社区[TalkingCoder](https://www.talkingcoder.com)，粗略看了一下这个社区，热度有限，不过既然是一个正规公司推出的，而且旗下还有很多产品，而且框架才刚推出不久，所以这个框架应该不会轻易被放弃，延续性很高。  
+除此之外，框架Github上的最近一次提交还是这几天，说明更新也十分频繁，并且是一个团队在制作和维护
+## 评价
+网上的评价较少，但基本都是正面的评价。  
+但是很糟糕的一个是Element框架团队指责iView抄袭，并贴出了代码证据，同时开发公司围绕iView创办了很多收费课程，让这个项目看起来好像没有那么纯粹，Element原文：[https://zhuanlan.zhihu.com/p/25739512](https://zhuanlan.zhihu.com/p/25739512)
+## 其他
+除了框架之外，iView搭配了一些其他工具，包括一站式构建工具iView Cli，iView Theme等，所以有理由相信这个框架的发展是稳健的，但是鉴于Element指出的恶劣行径，让我对这个框架的稳定性表示怀疑
+
+# Element
+## 官网
+[http://element.eleme.io/#/zh-CN](http://element.eleme.io/#/zh-CN)
+Github：[https://github.com/ElemeFE/element](https://github.com/ElemeFE/element)
+## 组件
+总共是6大类共43类组件，包括了常见的各种组件，基本覆盖了全部用得上的组件，和iView不相上下（而且Element还吐槽过iView抄袭）
+## 知名度/可延续性
+Element是老牌的Vue UI框架了，它的开发公司如雷贯耳，是由饿了么开发的一款UI框架，公司就不说了，几年内倒闭散伙的可能性基本没有……  
+基于饿了么去年在社区开源了为数众多的开源项目，所以Element项目也肯定是完成度相当高的一个项目，目前也是在知乎，百度等地方讨论最多的框架。
+Github上的最新一次提交居然是2小时之内，可以想象未来更新和维护的力度一定不会小，加上饿了么公司的背书，即使框架不再更新了，截止到目前也应该是一个bug数量少，完成度高的一个框架。
+## 评价
+包括自评和网评的口碑都相当不错，为其写的教程博客也很多
+## 其他
+Element官网提供了详细的中文文档和一些辅助开发资源，最重要的是，饿了么还提供了基于Vue的手机端UI框架：[https://github.com/ElemeFE/mint-ui](https://github.com/ElemeFE/mint-ui)，这就意味着如果将来要开发手机端页面的时候，视觉效果的一致性也会有保证，这是关于Element框架最重要的一个点
+
+# VueStrap
+## 简介
+VueStrap是一个完全实现了BootStrap功能的基于Vue的UI框架，并且不需要第三方的JS文件，包括Jquery和BootStrap都是不需要的，如果想要在Vue上实现BootStrap的效果，就可以使用这个框架
+## 官网
+[http://yuche.github.io/vue-strap/](http://yuche.github.io/vue-strap/)
+Github：[https://github.com/yuche/vue-strap](https://github.com/yuche/vue-strap)
+## 组件
+共提供21个组件，当然是包括了基本所有常用的组件，按钮，输入框，表单什么的，缺乏的是一些组件的动态效果。
+## 知名度/可延续性
+因为延续了BootStrap的样式，所以受到了不少从BootStrap转移过来的开发者的关注，从Github可以看出这应该是一个个人项目，主要由两个人开发，以[@yuche](https://github.com/yuche)为主，而且这个开发者显然也不是全职开发框架，所以框架的延续性存疑，框架的大部分内容都是两年前就已经停更了，但是在几个月前也提交了一些文件，应该是修复性的维护。  
+所以作者应该是不会再继续开发新的组件和功能了，框架就此停更。
+## 评价
+关于VueStrap的说法有一些，基本是说延续了BootStrap的样式让人挺喜欢的云云，案例和教程都不多
+## 其他
+无
+
+# Keen UI
+## 简介
+这是一款来自国外的基于Material Design设计风格的UI框架。
+## 官网
+[https://josephuspaye.github.io/Keen-UI/#/ui-alert](https://josephuspaye.github.io/Keen-UI/#/ui-alert)
+Github：[https://github.com/JosephusPaye/Keen-UI](https://github.com/JosephusPaye/Keen-UI)
+## 组件
+共提供29个组件，常用的都有，并且完美实现了Material Design的动态效果，包括涟漪扩散和组件阴影
+## 知名度/可延续性
+这就是一个完完全全的个人项目，不具有延续性……基本上是去年完成了这个项目之后就弃坑了，最后一次提交Github是在5个月前。
+## 评价
+虽然我个人认为在设计实现上已经很完美体现Material Design的风格了，但是国内用的人屈指可数，中文社区基本都只是提了下名字，加上个人项目和已弃坑的这个背景，我对这个框架也是没有评价了。  
+适合个人开发的以及想要Material Design风格的开发者使用
+## 其他
+无
+
+# Vue-Blu
+## 简介
+## 官网
+[https://chenz24.github.io/vue-blu/#/](https://chenz24.github.io/vue-blu/#/)
+Github：[https://github.com/chenz24/vue-blu](https://github.com/chenz24/vue-blu)
+## 组件
+提供了4大类共30个组件，常用的……反正就是用得上的基本都有，我就不废话了。
+## 知名度/可延续性
+这也是一个个人项目，但完成度相当高，不过最近的一次提交也是要算到6、7个月之前了，所以这个框架也算是停更了，但是在Github上，作者表示最近事情太多导致框架停更，将会在一段时间后重新开始更新，以下是原文：  
+> I'm very sorry about the lack of concern about this library Recently. So busy in doing other things and I have no time to maintain it. I will be back in 2 about months. Thanks everyone!(20170526)
+近期其他事过于繁忙，以致没时间维护这个库了。很抱歉，不能更新和回答大家的问题。我会在大约两个月后回来继续更新维护它。谢谢大家的支持！(20170526)
+
+总之即使虽然框架做的很不错，但是延续性什么的基本就看作者心情了。虽然我不排斥个人项目（毕竟Vue也是个人项目），但是说停就停显然很难让人放心
+## 评价
+评价有限，使用的人都表示好评，但是有不少组件有坑，或者设计不太好
+## 其他
+组件里提供了左右弹出式的侧边栏，就好像Android的侧边栏一样。
+
+# Muse UI
+## 简介
+这也是一个使用了Material Design设计风格的UI框架
+## 官网
+[https://museui.github.io](https://museui.github.io)
+Github：[https://github.com/museui/muse-ui](https://github.com/museui/muse-ui)
+## 组件
+提供了多达40个组件，其中有不少组件是为了Material Design设计风格而特有的
+## 知名度/可延续性
+项目的大部分代码都在3~7个月前完成，虽然最近的一次提交在24小时之内，但是按照提交的文件来看，应该也是维护性更新，所以这个框架的发展也是到了快弃坑的时候了。
+## 评价
+国外的项目国内用得都少……更别说个人项目了
+## 其他
+比Keen UI要完整得多得多，所以如果有Material Design风格需求的人，可以大胆尝试这个框架，因为这个框架实现的效果也是一流的。
+
+# 总结
+综上所述，选择Element UI框架是一个不错的选择，在各个方面都满足要求并且功能良好，主要考虑的因素是其文档是中文而且完整，针对Element框架的文章，博客都不少，另一个因素就是饿了么公司自身就采用了这个框架，大公司的网站重构起来非常困难，所以这意味着除非饿了么倒闭，那么Element框架都不会轻易被放弃，这也是我认最重要的一个点。实际上UI框架的解耦程度很高，所以即使出现了一些小问题也可以轻易地通过其他框架的组件或自行编写组件来补充。