Vue JS 是一个渐进式 JavaScript 框架，用于开发单页应用程序 (SPA) 和用户界面。它是目前使用最广泛的前端框架之一。

 

Vue 的一个有趣的功能是它能够将网页分解为不同的组件。通过使用 UI 组件库，这个过程变得更加简单。

 

有各种UI组件库可以帮助您轻松快速地创建组件。因此，在本博客中，我们将回顾 10 年排名前 2021 的 Vue UI 组件库。

 

1.PrimeVue

 

PrimeVue 是一个易于使用、多功能且高性能的 Vue UI 组件库，可帮助您构建出色的用户界面。

 

它拥有超过 80 个 UI 组件，完全支持 Web 内容可访问性指南 (WCAG) 和响应式设计。由于最近的更新，该库现在完全支持 Vue 3。它还获得了更多组件。

 

Primevue 最好的事情之一是其广泛的组件。它们的范围从表格和分页器到精心制作的基于图形的组织图表，您可以使用它们来创建交互式 Vue 应用程序。它是开源的，在 Github 上拥有超过 1 颗星，在 NPM 上每周下载量为 6,983 次。

 

2. 验证

 

Vuetify 是一个 Vue UI 库，具有使用 Material Design 规范的精美手工组件。这意味着它是完全根据 Material Design 规范开发的，每个组件都经过精心设计，具有模块化、响应灵敏和高性能。

 

Vuetify 允许您使用独特的动态布局自定义应用程序，并使用 SASS 变量完善组件的样式。

 

它还支持辅助功能指南、所有现代浏览器，并且与 Vue CLI-3 兼容。它易于集成，并且具有许多可重用的 UI 组件，例如轮播、导航和卡片。 Vuetify 是开源的，在 Github 上拥有超过 29 颗星，在 NPM 上每周下载量为 319,170 次。

 

3.Chakra UI Vue

 

Chakra UI 是一个简单的模块化且可访问的组件库，为您提供快速轻松地构建 Vue 应用程序的工具。

 

所有组件都是可访问的（严格遵循 WAI-ARIA 标准）、可主题化和可组合。它支持开箱即用的响应式样式，并且兼容暗模式。

 

Chakra UI 还包含一组布局组件，例如 CBox 和 CStack，可以通过传递 props 轻松设置组件的样式。它还允许您使用 webpack 插件解决方案自动导入 Chakra UI Vue 组件。它是开源的，在 Github 上有 900 多颗星，在 NPM 上每周下载量为 331 次。

 

4.BootstrapVue

 

BootstrapVue，借助 BootstrapVue，您可以使用 Vue.js 和流行的前端 CSS 库 — Bootstrap 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。该文档很容易理解，也很容易设置。它使前端实现更快地完成。

 

它提供 85 多个组件、超过 45 个可用插件、多个指令和 1000 多个图标。它还提供针对布局和响应式设计量身定制的功能组件。您还可以使用 Nuxt.js 模块轻松将 BootstrapVue 集成到您的 Nuxt.js 项目中。

 

它的使用方式也与 bootstrap CSS 框架的使用方式相同。它在 Github 上开源，拥有约 12.9 个 star 和 1.7 个 fork。

 

5. 维埃萨克斯

 

Vuesax 是一个使用 Vuejs 创建的新的 UI 组件框架，可以轻松地创建项目，并具有独特而令人愉快的风格，vuesax 是从头开始创建的，专为从前端爱好者到想要轻松创建可视化方法的后端的所有类型的开发人员而设计。最终用户。每个组件的设计都是独一无二的，并且不依赖于任何视觉趋势或设计规则，这使得用它构建的项目也独一无二。

 

它提供响应式页面以及可重用和可定制的 UI 组件。使用 npm 或 CDN 也很容易上手。目前其最新版本不支持 Vue CLI 3。它在 Github 上开源，拥有约 4.9 颗星，NPM 每周下载量为 6700 次。

 

6.Ant Design Vue

 

Ant Design vue 基于 Ant Design 规范，Ant design vue 是一个 vue UI 库，包含一组高质量的组件和演示，用于构建丰富的交互式用户界面。

 

Ant-design-vue 提供了大量的 UI 组件来丰富您的 Web 应用程序，例如骨架、抽屉、统计等等。

 

随着最近发布的 ant design vue 版本 2，它已更新为更快、更容易集成、更小的包大小，并且还支持 Vue 3、新的 Composition API 文档。它还支持现代网络浏览器、服务器端渲染和电子。它在 Github 上拥有超过 13 颗星，NPM 每周下载量为 39,693 次。

 

7. 类星体

 

Quasar 是最好的 Vue UI 框架之一，它允许开发人员通过 Quasar CLI 使用适用于所有平台的同一个源代码库，并采用开箱即用的最佳实践。它让开发人员可以专注于应用程序的内容，而不是围绕它的所有其他模板内容（构建系统、布局）。它专注于遵循 Material 2.0 指南，并且拥有一个非常支持的社区。

 

Quasar 的特别之处之一是能够编写一次代码并同时将其部署为网站，即仅使用一个代码库的移动应用程序。目前还有一个新版本处于测试阶段，它将支持 vue 3 功能。它在 Github 上有大约 17.8 颗星。

 

8. 布菲

 

Buefy 是一个基于 Bulma（一个 CSS 框架）的轻量级 Vue JS UI 组件库。 Buefy 将 Bulma 与 Vue 结合起来，帮助您使用最少的代码构建美观的应用程序。它是 Bulma 界面的 javascript 层。

 

它可以完全导入，也可以在普通网页上导入单个组件。将其集成到您的项目中非常容易，可以使用 npm 或 CDN 来完成。

 

Buefy 提供现成的 UI 组件、布局和图标。该组件可以将 SASS 用于您的主题。它还支持现代浏览器。

 

9.Vue材质

 

Vue Material 是一个广泛使用的轻量级框架，它实现了 Material Design 规范。它是 Vue.js 和 Material Design 规范之间最好的集成之一！您可以通过简单的 API 轻松配置它以满足您的所有需求。

 

它与响应式设计兼容并支持所有现代 Web 浏览器。该库分为主题、组件和 UI 元素。主题提供了有关如何主题化您的应用程序（或编写您自己的主题）的明确指南，而组件和 UI 元素由布局、导航、排版、图标和其他 30 个组件组成。它在 Github 上拥有约 9.2 个 star 和 1.1 个分支，NPM 每周下载量超过 21 次。

 

10. 基恩用户界面

 

KeenUI 是一个轻量级的 vue.js UI 库，具有简单的 API，灵感来自 Google 的 Material Design。 Keen UI 不是 CSS 框架。因此，它不包括网格系统、排版等的样式。相反，重点是需要 Javascript 的交互式组件。

 

它有大约 30 个可重复使用的组件。可以通过使用 SASS 变量覆盖样式来自定义组件。您可以使用 CDN 或 npm 将其集成到您的项目中。它是开源的，在 Github 上有大约 4k 颗星。

 

结论

 

UI 组件库无疑使构建项目变得更加容易。选择合适的项目取决于您想要从事的项目的功能。在投入新项目之前，建议您查看最适合该目的的 UI 组件库。