Vue.js: Element UI 与 Vuetify 比对

1、Element UI（目前版本：2.13.2）

ElementUi官网：Element - 网站快速成型工具

GitHub仓库：https://github.com/ElemeFE/element

正如官方介绍所说的，Element UI框架组件具有很强的“一致性”特征，默认情况下为浅蓝色风格配色，组件标签用“el-”开头，通常只需要组合添加几个组件就能生成比较不错的设计布局

从整体上保持高度一致，很适合快速建站的小伙伴们，代码不多，只需要简单的设定属性以及绑定数据，配合上ElementUI的布局设计，前端实现网站还不分分钟的事情 ，代码实现相对之前辛苦的写样式的确是省事不少。

要说不方便的地方嘛。。。还的确有，某种程度上还有点不好解决，就是屏幕适应的问题。

正常的看这几个图还行，但把窗口大小调整后。。。emmm，有点不忍直视了

是吧，这缩放之后就有点尴尬的。所以开始尝试寻找一款能针对屏幕做适配的Vue框架（大佬可以自己适配，我就是个嫌麻烦的菜鸡~~）

2、Vuetify（目前版本：2.3.15）

最新版本v2.3.15官网地址：Vuetify - A Material Design Framework for Vue,js

旧版v2.x官网地址： Vuetify - A Material Design Framework for Vue,js

GitHub仓库：https://github.com/vuetifyjs/vuetify

Vuetify 是 Vue.js 的头号组件库，自 2016 年以来一直在积极开发。该项目的目标是为用户提供使用 Material Design specification 构建丰富且引人入胜的 web 应用程序所需的一切。它通过一致的更新周期、对以前版本的长期支持 (LTS)、响应式社区参与、丰富的资源生态系统和对高质量组件的贡献来实现这一点。

一个尤雨溪大大推荐的框架，使用时的体会简直就是屏幕适配的最好框架（大概没有之一吧），放一个效果图看看就知道了：

这是模拟三种情况下的视图，分别是PC、平板与手机，三种窗口之间缩放可直接切换

官方制定了五种屏幕适配解决方案

{   // Breakpoints   xs: boolean   sm: boolean   md: boolean   lg: boolean   xl: boolean   // Conditionals   xsOnly: boolean   smOnly: boolean   smAndDown: boolean   smAndUp: boolean   mdOnly: boolean   mdAndDown: boolean   mdAndUp: boolean   lgOnly: boolean   lgAndDown: boolean   lgAndUp: boolean   xlOnly: boolean   // true if screen width < mobileBreakpoint   mobile: boolean   mobileBreakpoint: number   // Current breakpoint name (e.g. 'md')   name: string   // Dimensions   height: number   width: number   // Thresholds   // Configurable through options   {     xs: number     sm: number     md: number     lg: number   }   // Scrollbar   scrollBarWidth: number}

使用实例如下，使用hidden-?-and-down类可以隐藏某类设备及其像素以下的组件

例如

桌面版AppBar：

......

手机版AppBar:

......

3、总结

总得来说，两种都是非常优秀的框架，一种是饿了么团队开源的一款统一设计风格快速建站框架，一款是基于MaterialDesign设计理念的一款多分辨率显示适配的框架，两者都有其优势，且侧重点都不一样。ElementUI更侧重创建一组风格统一、高效且易于上手的理念，而Vuetify框架讲究多平台适配，与Google设计MaterialDesign设计风格搭配到一起，代码量会比Element稍微大一些，但对于自己做屏幕分辨率适配还是轻松不少。（啊，对了，最新的Vuetify框架还没有中文文档，这一点上自然比不上ElementUI这种本土框架，后期会慢慢适配的，近日想学习Vuetify框架，但英语水平也不是那么好的话，可以进入官网后点击下图红色划线部分进入旧版文档）

Element UI JavaScript webpack ECMAScript Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。