Vue.js 是一个渐进式 javascript 框架,用于构建 UIS (用户界面) 和 SPA (单页应用程序)。UI 组件库提高了我们的开发效率,增强了应用的整体外观、感觉、交互性和可访问性,下面就来看看有哪些适用于 Vue 的 UI 组件库。
官网:https://youzan.github.io/vant
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,于 2017 年开源,其提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适不过了。
VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合 vux-loader 方便在WeUI的基础上定制需要的样式。vux-loader 保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。
VUX 并不完全依赖于 WeUI,VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUI的设计规范。
官网:https://didi.github.io/cube-ui
cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。
其有以下的功能特性
质量可靠,其由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。
体验极致,其以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。
标准规范,其遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。
扩展性强,其支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
由饿了么前端团队推出的 Mint UI 是一个基于 vue.js 的移动端组件库。
Mint UI 有以下特性
Element 是由饿了么UED设计、饿了么前端开发的一套基于 Vue 2.0 的桌面端组件库。
与传统的开发对比传统的是一个应用一个页面对应对多个界面,vue+elementUI的话是单页面的开发方式,不管项目多少个页面,只需要使用一个页面即可实现传统方式的功能,从性能方面来讲它的渲染、页面切换、都是比传统的快很多的。
Element UI 的特性:
一致性 Consistency
现实生活一致: 与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致: 所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
反馈 Feedback
控制反馈: 通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈: 操作后,通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
简化流程: 设计简洁直观的操作流程;
清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控 Controllability
用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控: 用户可以自由地进行操作,包括撤销、回退和终止当前操作
iView UI一套基于 vue.js 的高质量 UI 组件库,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一。
iView UI特性:
高质量、功能丰富;
友好的 api ,自由灵活地使用空间;
细致、漂亮的 UI;
事无巨细的文档;
可自定义主题。
官网:https://github.com/vuematerial/vue-material
Vue Material 是一个建立在谷歌的 Material Design 基础上的轻量级框架,是一个实现Google像素材料设计的Vue组件库,它提供了适合所有现代Web浏览器的内置动态主题的组件,它的API也简单明了。
Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。