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

Vuetify —— Material Design Framework

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

亮点: 

  • 包括颜色、阴影大小、大小在内的丰富的可配置项
 Extra small Button 
  • Chips:类似于tag标签,可以插入图标和事件

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

前端VUE常用UI框架总结_第1张图片

前端VUE常用UI框架总结_第2张图片

  • 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 进度环:可用于简单地展示统计数据

你可能感兴趣的:(杂七杂八)