Laucher
2024年 01月 22日
12个国内外最受欢迎及常用的Vue 3组件库
Vue 3的迅速普及带来了一系列强大的UI框架，为开发者提供了灵活、高性能的工具。本文介绍了BalmUI、Element Plus、Wave UI、Ionic Vue、Vuetify 3、Quasar、PrimeVUE、Ant Design Vue、Vuestic UI、Vue DevUI和Inkline等框架，它们适用于不同的开发需求，加速开发并提升用户体验。
在此，我将展示一系列我知道的并且认为是非常出色的Vue 3 UI框架（先国内再国外，除此无特定顺序），这里面肯定有你熟悉的组件库。它们将助力你打造美观的Vue 3应用，同时提供出色的开发者体验。让您在选择组件库时可以根据项目需求进行选择。
1. Element Plus
Element在Vue 2中取得了成功，这个组件库对于前端开发者们而言也是比比皆知，Element Plus为Vue 3带来了大量不显眼的组件。我们需要创建一个非常复杂的应用程序的大部分功能已经制作并准备好使用；Element Plus提供了成熟的日期和时间选择器、树形结构、时间线和日历组件。Element Plus的另一个优点是，它与Element UI兼容，这意味着您可以使用相同的组件库在Vue 2和Vue 3项目中。
Element Plus为开发者构建UI界面时提供了最微妙的补充，从简单的动画到全局国际化系统。每一段文字都是可翻译的字符串，可以与i18n一起使用，以创建自定义翻译，甚至添加不内置的语言。 Element Plus正在成为GitHub上最受欢迎的Vue 3 UI框架之一， 在GitHub上拥有22,000颗星和每周下载量为84,347次，它通过出色的问题管理、及时的更新、可插拔的组件和通过SCSS变量的高度可定制性实现了我们的期望。
2. Ant Design Vue
Ant Design Vue可谓是国内排行前三的组件库了，它是阿里前端团队推出的。想必前端开发者们就算没用过它都知道它的存在。使用Ant Design Vue创建用户界面非常简单；组件能够适应各种图标风格、字体和深色主题。Ant Design Vue不断改进其60多个组件，使它们更好、更易访问。Ant Design Vue的另一个优点是，它与Ant Design React兼容，这意味着您可以使用相同的组件库在React和Vue项目中工作。
Vue 3上的Ant Design拥有较小的捆绑大小，感觉更轻巧，并支持SSR（甚至是组合API）。Ant Design通过成熟的复杂组件，如数据表、统计框、弹出确认框、模态框和弹出框，使其感觉完整。 Ant Design Vue在GitHub上有19,200颗星和每周下载量为41,000次。这表明了它的受欢迎程度和社区的强大支持。
3. Naive UI
2021年6月7日 尤雨溪在微博上推荐了naive 这个来自图森未来的开源组件库。
Naive UI提供了70多个精心制作的组件。在GitHub上拥有14,600这些组件性能卓越、可定制，并具有一流的TypeScript支持，可适用于任何Vue 3应用。
Naive的文档网站具有完整的自定义输入，以帮助开发者预览组件在其自己主题下的外观。您可以使用选项进行调整，创建带有颜色模式和字体的完整主题。此自定义主题可下载并轻松添加到您的应用程序中，以覆盖默认设置。
凭借对浅色和深色主题的支持、可摇晃的组件以及丰富的。
4. Vue DevUI
Vue DevUI是基于Vue 3和腾讯的DevUI Design开发的功能丰富的组件库。它包含55个以上的高质量组件，简单易用且灵活。Vue DevUI支持TypeScript、Nuxt 3、国际化、主题定制等。 Vue DevUI还有非常全面的文档，包括示例、API参考和使用指南，为用户提供了有价值的资源。 Vue DevUI的知名度有限，GitHub上拥有922颗星，并且平均每周下载量为249次。但这与其质量无关，因为它仍然是Vue 3中最好的UI框架之一。
5.BalmUI
BalmUI自9.0版本起支持Vue 3。Balm基于Google的Material Design，因此它可能看起来很熟悉。Balm随附Vue插件和指令，以及从简单到复杂（如范围选择器）可高度定制的组件。 BalmUI发展迅速，在你的Vue 3项目中使用它将是一个不错的选择，特别是如果你想遵循Material Design样式，并希望使用内置的复杂指令，如去抖动和UI波纹，这在创建自定义组件时会很方便。它在GitHub上有489颗星，并每周下载量达5,186次。
6.Wave UI
7.Ionic
Ionic Vue是最早提供Vue 3支持的UI框架之一。Ionic更偏向移动UI，他们知道如何满足和维护一个出色的UI框架。 Ionic Vue感觉非常成熟。它有一个强大的社区，大量的StackOverflow问题，企业支持以及一个拥有核心成员的大型Slack频道。这使得在需要帮助时易于得到支持。 Ionic框架在GitHub上有50,000颗星，每周下载量为6,763次，已经被许多大公司使用，包括空中客车和艺电。Ionic的团队以维护他们的UI框架而闻名，使其成为现在和将来的一个不错选择。
8.Vuetify 3（Titan）
在GitHub上有38,600颗星和每周下载量为211,500的情况下，Vuetify是一个非常受欢迎的Vue UI框架。它受到Vue用户的高度赞赏，并且因为充分利用Vue API创建令人惊叹的组件而受欢迎。尽管Vuetify基于Google的Material Design，但其可定制性是一流的，使您可以快速创建定制的主题。 Vuetify 3，也称为Titan，仍然相对较新，但它已经展现出取代Vuetify 2并在Vue 3中成为坚实UI框架的迹象。 由于以下原因，Vuetify受到许多大公司的认可：
- 良好的发布周期，因此始终感觉安全和稳定
- 组件的可访问性和响应性
- 出色的文档
- 大型社区
- 核心团队的支持
9.Quasar
Vue 3的迅速采纳让Quasar迅速发布了几乎所有他们v1版本的组件、插件和指令。此外，他们还发布了可帮助开发者更深入使用Quasar API的组合式API。 Quasar在GitHub上有24,800颗星和每周下载量为48,000次，因此它已经得到了很好的建立，并在Discord和Twitter上拥有积极的社区。这使得它成为一个出色的UI框架选择，如果你需要为你的Vue应用程序开发三个平台（Web、桌面或移动）。
10.PrimeVUE
PrimeVUE早于其他框架预计会更早地采用Vue 3，并且没有辜负期望。拥有80多个组件，PrimeVUE证明自己是这个列表上组件范围最广的框架之一。 这里的组件包括带有密码强度表的表单、滑块、树形结构、图表、分割按钮、旋钮、图表等。PrimeVUE甚至为Vuelidate（一种表单验证库）提供了一流的集成。PrimeVUE提供了预制主题，并将很快提供一个主题编辑器，帮助开发者自定义他们自己的主题。 PrimeVUE在GitHub上有6,200颗星，但每周下载量高达60,000次。它在Vue 3的采用中增长得相当好。为开发者提供与Vue 3的强大库混合的能力将使他们对使用这个工具感到兴奋。
11.Vuestic UI
Vuestic UI是一个专为简单性和可定制性而设计的Vue.js 3 UI框架。它提供了一组即用即用的前端组件，帮助您快速构建响应式和加载速度快的Web界面。 Vuestic UI提供了各种组件，如按钮、表单、表格、图表等，帮助您在构建常见UI元素时节省时间和精力。该框架在灵活性方面也非常强大，允许开发者根据其特定需求和设计偏好定制组件。 Vuestic UI的吸引力不仅在于其功能。它在Discord上拥有一个充满活力的社区，开发者可以在那里获得支持、分享想法，并为框架的持续发展做出贡献。这种程度的参与确保了Vuestic UI将继续发展和适应Vue上的任何错误或更新。 Vuestic UI在GitHub上有3,200颗星，在撰写本文时平均每周下载量为832次。虽然它可能不像许多其他框架那样受欢迎，但它仍然得到了很好的维护并拥有一个非常活跃的社区。
12.Inkline
Inkline是一个强大的Vue.js UI组件库，为开发者提供了一组强大的组件和工具，加速响应式Web应用的开发。Inkline还以辅助功能为设计核心，因此其组件符合辅助功能最佳实践和指南。在GitHub上有1,400。 Inkline的核心是一个包含广泛的组件集合，涵盖了各种UI元素。从基本的构建块，如按钮和输入字段，到更复杂的组件，如表格、模态框和导航菜单，Inkline为开发者提供了一个非常多样化的工具包。这一丰富的组件集不仅节省了开发时间，还促进了用户界面的一致性。
