13个开发常用的Vue UI组件库

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

1. Element UI

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

GitHub地址： https://github.com/ElemeFE/element

2. Ant Design of Vue.

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

GitHub地址： https://github.com/vueComponent/ant-design-vue/

3. Vue Material

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

GitHub地址： 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地址： https://github.com/bootstrap-vue/bootstrap-vue

5. Vuetify

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。
Material Design 是 Google 推出的设计语言，颜色鲜艳、动画效果突出，旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

GitHub地址： 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的设计规范。

GitHub地址： https://github.com/airyland/vux

7. View UI

View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

GitHub地址： https://github.com/view-design/ViewUI

8. Mint UI

Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。它可以实现真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 100kb+。

GitHub地址： https://github.com/ElemeFE/mint-ui

9. Muse-UI

Muse-UI 是一个基于 Vue 2.0 优雅的 Material Design UI 开源组件库，主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用。

GitHub地址： https://github.com/museui/muse-ui

10. Buefy

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件。

GitHub地址： https://github.com/buefy/buefy

11. Quasar

Quasar 包括用 Vue 构建的几十个 Vue.js 组件组成，为响应式 Web 应用程序和混合移动应用程序提供的丰富功能选项。组件是作为 Web 组件编写的，所以它们嵌入了 HTML，CSS 和 Javascript 代码，只需在页面和布局模板中标注一个 HTML 标记即可使用。

GitHub地址： https://github.com/quasarframework/quasar

12. Vuesax

Vuesax是基于Vue.js的组件框架,从零开始设计，可以逐步采用。Vuesax致力于促进应用程序的开发，在不删除必要功能的情况下改进其设计。“我们希望所有组件具有独立的颜色，形状和设计，以实现我们前端喜欢的自由设计，同时又不损失创作和生产的速度。”

GitHub地址： https://github.com/lusaxweb/vuesax

13. Vant UI

Vant 是开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
Vant性能极佳，组件平均体积小于 1KB（min+gzip），封装了 65+ 个高质量组件，覆盖移动端主流场景。

GitHub地址： https://github.com/youzan/vant

---

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2022-02-14
最后更新： 2023-07-17
本文标题： 13个开发常用的Vue UI组件库
本文链接： https://www.tiven.cn/p/b913ca37/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！