背景:Vue.js 是一个渐进式 javascript 框架,用于构建 UIS(用户界面)和 SPA(单页应用程序)。UI 组件库的出现提高了我们的开发效率,增强了应用的整体外观、感觉、交互性和可访问性,下面就来看看有哪些适用于 Vue 的 UI 组件库。
(1)一致性 Consistency
与现实生活一致: 与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致: 所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
(2)反馈 Feedback
控制反馈: 通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈: 操作后,通过页面元素的变化清晰地展现当前状态。
(3)效率 Efficiency
简化流程: 设计简洁直观的操作流程;
清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
(4)可控 Controllability
用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控: 用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
网址:https://element.eleme.io/
GitHub(star:51.6k):https://github.com/ElemeFE/elem
提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享 Ant Design of React 设计工具体系。
网址:https://ant.design/
GitHub(star:16k):https://github.com/vueComponent
3.Vue Material
vue-material是一个建立在谷歌的Material Design基础上的轻量级框架,是一个实现Google像素材料设计的Vue组件库,它提供了适合所有现代Web浏览器的内置动态主题的组件,它的API也简单明了。
Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上。 设计强大的和美观的web应用并适用于不同的屏幕。
官网:https://mui.com/material-ui
GitHub(star:9.6k):https://github.com/vuematerial/
BootStrap(Web端+移动端)
采用 BootstrapVue 构建响应式、移动优先、ARIA项目(Accessible Rich Internet Application,可访问的富媒体应用,即无障碍友好应用),基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4。
BootstrapVue 拥有40多个可用插件和80多个自定义UI组件、指令以及300多个图标,全面兼容并符合 Bootstrap v4.4组件和网格系统规范,基于 Vue.js v2.6, 并具备广泛和自动的 WAI-ARIA 可访问性友好支持。
网址:https://www.bootcss.com/
GitHub(star:13.7k):https://github.com/bootstrap-vu
vuetify(Web端+移动端)
Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。
Material Design 是 Google 推出的设计语言,颜色鲜艳、动画效果突出,旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
Vuetify 的特性:
所有组件遵从 Material Design 设计规范,UI 体验优秀,能够媲美苹果但又完全不同的设计采用移动优先的设计;
无论在手机、平板或 PC 电脑上都有完美的适配;
极其丰富详细的上手文档和免费的视频教程,社区活跃,全职团队维护,长期提供支持,每周发版;
支持主题定制,提供无障碍(面向缺陷人群的访问)支持。支持树摇优化,能大大减少打包体积。
网站:https://vuetifyjs.com/zh-Hans/
GitHub(star:33.4k):https://github.com/vuetifyjs/vu
6.Vux(移动端)
VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库,主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面,配合 vux-loader 方便在WeUI的基础上定制需要的样式。vux-loader 保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。
VUX并不完全依赖于WeUI,VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUI的设计规范。
不过,官网首页也列出了这个组件库的缺点:体验不极致、维护靠个人,谨慎选择。
官网:https://vux.li/
GitHub(star:18k):https://github.com/airyland/vux
7.View UI(Web端)
View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
View UI 的特性:
丰富的组件和功能,满足绝大部分网站场景;
提供开箱即用的 Admin 系统 和 高阶组件库,极大程度节省开发成本;
提供专业、优质的一对一技术支持;
友好的 API ,自由灵活地使用空间;
细致、漂亮的 UI;
事无巨细的文档;
可自定义主题。
官网:https://www.iviewui.com/
GitHub(star:2.5k):https://github.com/view-design/
8.Mint UI(移动端)
Mint-UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。它可以实现真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 100kb+。
官网:
官网:https://elemefe.github.io/mint-ui/#/
GitHub(star:16.4k):https://github.com/ElemeFE/mint
GitHub(star:8.3k):https://github.com/museui/muse-ui
轻松保留当前的布尔玛主题/变量;
支持Material Design图标和FontAwesome;
非常轻巧,除了Vue&Bulma之外没有任何内部依赖性;
语义代码输出;
遵循布尔玛设计和一些Material Design UX;
专注于可用性和性能,而无需过度动画;
官网:https://buefy.org/
GitHub(star:9k):https://github.com/buefy/buefy
开箱即用的提供给网站和应用程序的最先进的UI(遵循《Material指南》);
开箱即用的对桌面和移动浏览器(包括iOS Safari!)的最佳支持;
通过与自己的CLI紧密集成,对每种构建模式(SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展)提供了一流的支持,并提供了最佳的开发人员体验;
易于自定义(CSS)和可扩展(JS);
自动tree shaking。
官网:http://www.quasarchs.com/
GitHub(star:20.4k):https://github.com/quasarframew
12.Vuesax
Vuesax是基于Vue.js的组件框架,从零开始设计,可以逐步采用。Vuesax致力于促进应用程序的开发,在不删除必要功能的情况下改进其设计。“我们希望所有组件具有独立的颜色,形状和设计,以实现我们前端喜欢的自由设计,同时又不损失创作和生产的速度。”
官网:https://vuesax.com/
GitHub(star:5.3k):https://github.com/lusaxweb/vue
13.Flatkit(web端)
基于世界上最流行的css框架Bootstrap 4和流行的js框架AngularJS, Flatkit提供了构建下一个web项目的简单方法。
基于Bootstrap 4和AngularJS的Demo
14.layui(web端)
采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
网站:https://layui.org.cn/
15.View UI(web端)
View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
网站:www.iviewui.com/
丰富的组件和功能,满足绝大部分网站场景
提供开箱即用的 Admin 系统 和 高阶组件库,极大程度节省开发成本
提供专业、优质的一对一技术支持
友好的 API ,自由灵活地使用空间
细致、漂亮的 UI
事无巨细的文档
可自定义主题
16.ElementPlus(web端)
Element Plus 使用 TypeScript 与 Vue 3.开发,提供完整的类型定义文件,主要用于。并使用 Composition API 降低耦合,简化逻辑。
element-plus特点:
由于 Vue 3 不再兼容 IE,所以 Element Plus 也提高了最低兼容的版本。
Element Plus 同时支持 ESM、CJS 与 UMD 格式。一般情况下无需留意导入的格式,构建工具会自动匹配并转换成目标格式,同时无需额外配置,自身支持按需加载能力。
网站:https://element-plus.org/zh-CN/
17.layui(web端)
采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。
网站:https://layui.org.cn/
18.vant UI(移动端)
Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 版本和微信小程序版本,并由社区团队维护 React 版本。
网站:https://youzan.github.io/vant/#/zh-CN/
60+ 高质量组件,覆盖移动端各类场景
90%+ 单元测试覆盖率,提供稳定性保障
完善的中英文文档和示例
支持按需引入
支持主题定制
支持国际化
支持 TypeScript
支持 SSR
19.uni-app(移动端)
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
网站:https://uniapp.dcloud.io/
20.WeUI(移动端)
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
网站:https://weui.io/
21.iView Weapp(移动端)
一套高质量的微信小程序 UI 组件库
网站:http://inmap.talkingdata.com/wx/index_prod.html#/