前端VUE常用UI框架总结
在vue2的时代,PC端的ui框架可以说elementUI独步天下,至少我在面试及工作过程中遇到的都是使用elementUI的,但是该开源项目随着核心成员的离职,更新进度似乎越来越缓慢,似乎印证了那句“开源工作一旦功成身退,再也没有动力和精力去持续维护下去”的言论了。随着vue3的时代的到来,未来前端框架翻云覆雨,走势如何还不知道,但是各大UI框架已经开始卯足了劲开发适配vue3的版本,这其中当属
在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 进度环:可用于简单地展示统计数据
更多推荐
所有评论(0)