12 个不容错过的 Vue UI 组件库，请查收!

发表于 2年以前 | 总阅读数：929 次

Vue.js 是一个渐进式 javascript 框架，用于构建 UIS（用户界面）和 SPA（单页应用程序）。UI 组件库提高了我们的开发效率，增强了应用的整体外观、感觉、交互性和可访问性，下面就来看看有哪些适用于 Vue 的 UI 组件库。

1 . Element UI

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是一个用于 Web 的 UI 组件库，除了 Vue 之外，它还具有React 和 Angular的版本。

Element UI 的特性：

（1）一致性 Consistency

与现实生活一致： 与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致： 所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

（2）反馈 Feedback

控制反馈： 通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈： 操作后，通过页面元素的变化清晰地展现当前状态。

（3）效率 Efficiency

简化流程： 设计简洁直观的操作流程；
清晰明确： 语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别： 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

（4）可控 Controllability

用户决策： 根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控： 用户可以自由地进行操作，包括撤销、回退和终止当前操作等。

GitHub（star：51.6k）：https://github.com/ElemeFE/element

2 . Ant Design of Vue

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。

Ant Design of Vue 的特性：

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享 Ant Design of React 设计工具体系。

GitHub（star：16k）：https://github.com/vueComponent/ant-design-vue/

3 . Vue Material

vue-material是一个建立在谷歌的Material Design基础上的轻量级框架，是一个实现Google像素材料设计的Vue组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的API也简单明了。

Vue Material 是一个轻量级的框架，建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。

GitHub（star：9.6k）：https://github.com/vuematerial/vue-material

4 . BootStrap Vue

采用 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 可访问性友好支持。

GitHub（star：13.7k）：https://github.com/bootstrap-vue/bootstrap-vue

5 . Vuetify

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

Material Design 是 Google 推出的设计语言，颜色鲜艳、动画效果突出，旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Vuetify 的特性：

所有组件遵从 Material Design 设计规范，UI 体验优秀，能够媲美苹果但又完全不同的设计采用移动优先的设计；
无论在手机、平板或 PC 电脑上都有完美的适配；
极其丰富详细的上手文档和免费的视频教程，社区活跃，全职团队维护，长期提供支持，每周发版；
支持主题定制，提供无障碍（面向缺陷人群的访问）支持。支持树摇优化，能大大减少打包体积。

GitHub（star：33.4k）：https://github.com/vuetifyjs/vuetify

6 . Vux

VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库，主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面，配合 vux-loader 方便在WeUI的基础上定制需要的样式。vux-loader 保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

不过，官网首页也列出了这个组件库的缺点：体验不极致、维护靠个人，谨慎选择。