前端VUE常用UI框架总结

在vue2的时代，PC端的ui框架可以说elementUI独步天下，至少我在面试及工作过程中遇到的都是使用elementUI的，但是该开源项目随着核心成员的离职，更新进度似乎越来越缓慢，似乎印证了那句“开源工作一旦功成身退，再也没有动力和精力去持续维护下去”的言论了。

随着vue3的时代的到来，未来前端框架翻云覆雨，走势如何还不知道，但是各大UI框架已经开始卯足了劲开发适配vue3的版本，这其中当属的便是阿里系的蚂蚁金服提供的Ant Design了，据说已经完成了70%的工作。

由此产生了横向总结一下各个UI框架的想法，主要挑选世面上比较火热的几款，持续修改补充。

Element  /  Ant Design of Vue  /  Vuetify  /  iView

 

Element —— 网站快速成型工具，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

element无疑是近年来国内最成功的开源项目之一了，其扁平化的UI风格已经逐渐深入国内前端开发者的心中，逐渐被这种蓝色调的审美熏陶，可能会认为这才是规范的交互方式。相信绝大多数前端开发者对其功能已了然于胸，目前最大的问题就是已经停止更新了，代码仓库中业务代码的最近一次更新还是5个月前的事情了，issues中提了大量的问题也得不到及时的响应，vue3的时代，不知其何去何从。

Ant Design of Vue —— 开发和服务于企业级中后台产品

从antd的目标：开发和服务于企业级中后台产品，可以看出，antd追求的就是快速、标准，而且更是推崇自己的一套设计语言，用来规范项目的视觉效果。

目前ant design of vue的vue3版本已经出了测试版，Ant Design of Vue 2.0.0 (测试版)，未来可期！

亮点：

• Space 间距组件：可以控制<a-space>标签内的元素相同的间距
• Mentions 提及：相当于微信群的@，快速选中@某人
• TreeSelect 树选择：这个功能挺适用于我们项目中选取树状结构的部门的，我们是通过element弹窗实现的，操作不够轻量
• skeleton 骨架屏：预加载文档结构
• 表格头部可配置筛选按钮用于过滤数据

• 表格可设置行编辑和单元格编辑 

Vuetify —— Material Design Framework

相较于前两个ui框架，Vuetify是Material Design风格的，交互行为很丰富，MD是微软前几年推出的一种页面布局交互设计规范，这种风格的产品简洁、鲜明、高效，适用于移动端及PC端，在国外很受欢迎，国内还是因为受element的iOS扁平风格影响较多，并且其纯英文的文档，可能也会阻挡一大部分国内的开发者。

亮点： 

• 包括颜色、阴影大小、大小在内的丰富的可配置项

<v-btn x-small color="secondary" dark elevation="15"> Extra small Button </v-btn>

• Chips：类似于tag标签，可以插入图标和事件

• 输入框交互很自然，获取焦点后，提示信息过渡到左上角

• Windows：适用于全屏翻页的效果
• Parallax：页面滚动引起背景图片偏移，早些年apple官网常用的手段
• Skeleton-loaders：带加载动效的骨架屏
• Sparkline：简单的折线图展示

iView —— 一套基于 Vue.js 的高质量 UI 组件库

iView 是一套开源免费的 UI 组件库，但同时也可能是目前国内变现能力最好的UI库项目，iView免费提供一套基础的组件，除此之外，还提供包括 View UI Pro 和 Admin Pro 在内的多种收费产品，收费产品基本都是基于 iView 开发的一些拥有更完善的功能的组件，其中Admin Pro更是一个拥有鉴权、路由系统的完整的vue架构项目，省去了很多项目初始化工作。不过目前来看，适配也仅仅适配到vue2阶段，作为一个商业项目，其后面的发展可能就完全取决于市场的接受度了。

亮点：

• Cell 单元格：一种布局方式，用于固定的菜单列表
• LoadingBar 加载进度条：类似于 NProgress 插件
• 表格动态列配置，并且可以直接给行数据上添加一个className，用来控制样式

columns9: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age',
                        className: 'demo-table-info-column'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ]

• 表格头部可配置筛选按钮用于过滤数据
• 表格可以开启右键菜单功能快捷操作
• 表格本地导出为 csv 格式的文件
• Time 相对时间：相当月一个时间过滤器，但是有一个倒计时挺好用的，不用自己写setInterval了
• Circle 进度环：可用于简单地展示统计数据