任何好的视图渲染库都应该有大量的第三方组件可供开发人员使用,Vue也不例外,它有许多令人惊叹的组件库,您可以在任何您认为合适的项目中使用。
<$>[注] 最后更新于 2017 年 11 月 27 日 <$>
在过去的一年中,Vue.js的优质桌面 / 网页相应组件库和框架数量爆炸了,这意味着现在是时候更新这篇文章了. 在这里,我将尝试为每个库提供各种功能和统计数据,以帮助您为下一个项目做出明智的决定。
为了简短和避免选择瘫痪,我将积极排除可能庞大的图书馆,但似乎维护不良或缺乏完整的文档。
大多数这些组件集合都遵循 Material或 Ant的设计指南,尽管有几个外观因素,因此我会根据设计语言将它们分为类别。
组件类别
组件类别将被用来表示库中包含哪些组件,而无需列出每个组件. 以下是可能的类别列表。
- Inputs:按钮、输入字段、检查框等
- Advanced Inputs:Datepickers、Autocomplete、file uploaders
- Indicators:Badges、进度指标、Toasts、Snackbars
- Navigation:Menus、Tabs等
- Dialogs:Dialogs、Modals、Popovers
- Layout:侧面板、列表、卡片、网格、类型
材料设计
许多人熟悉材料设计,这是谷歌创建的设计语言,它将平面风格与现实的照明和阴影相结合,以创建熟悉的界面。
(图为: )(图为: )
Vue Material是一个强大的库,拥有大量的组件,涵盖了几乎整个材料设计规格,它尽可能紧密地遵循规格,因此,这些组件几乎无法区分到谷歌的原生实现。
周围的`
- 活跃开发: Yes
- 普及: ~5000星
- 许可证: MIT
- 尺寸: (pre-gzip) 390KB
- 主要开发者: Marcos Moura
- 文档质量: Thorough
- 文档语言: English
- 主要社区语言: English
- 组件: 输入、指标、导航、对话、布局
- 动画: 中间(
** 结论(TL;DR)** 开发您的整个应用程序将是一个很好的选择. 更高级的输入,如文件上传器或自动完成的comboxes可能需要其他第三方组件,但对于其他几乎所有事情,Vue Material 已经覆盖了您。
( )( )( )( )( )( )( )
Vuetify 是另一个伟大的材料设计组件库。它是从头开始设计的,以便将您的应用程序从 0 带到生产中。因此,它包括八个 CLI 模板,涵盖了从最简单的使用案例到完整的 SSR、Electron、PWA 和 Nuxt.js 示例,而与 Vue Material 一样,它遵循了材料设计规格,还提供了额外的选项和组件定制,以覆盖几乎所有可能的使用案例。
周围的`
- 活跃开发: Yes
- 普及: ~7000星
- 许可证: MIT
- 尺寸: (pre-gzip) 463KB
- 主要开发者: John Leider
- 文档质量: Thorough
- 文档语言: English
- 主要社区语言: English
- 组件: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
- 动画: **
** 结论(TL;DR)**Vuetify有你需要的一切,然后一些. 如果你选择它,你可能不会错了。
( )
Quasar Framework 旨在作为一个完整的,终极的框架。它以前在我们的移动组件圆形版中赢得了一席之地,但此后再次扩大了其功能,包括常见的桌面和Web应用程序组件。 它甚至有CLI! 它基本上是一个厨房洗碗机,几乎拥有你可以想到的一切。 除了材料设计主题,它还包括一个iOS主题,还有更多。 我的唯一抱怨是组件感觉相当低质量,使用不一致的字体和动画。
周围的`
- 活跃开发: Yes
- 普及: ~4,200星
- 许可证:MIT
- 尺寸: (pre-gzip) 463KB
- 主要开发者: Razvan Stoenescu
- 文档质量: 优秀!
- 文档语言: 英语
- 主要社区语言: 英语
- 组件: 输入、高级输入、导航、对话、布局
- 动画: 中间(_M
** 结论(TL;DR)**Quasar是很好的,当你想尽可能多地覆盖平台和组件,尽可能少的自定义工作。
( )( )( )( )( )( )( )( ))
Keen UI提供了一大批材料设计风格的组件。它不完全直接遵循规格,经常选择更轻的组件和更快的过渡,但作为结果,它感觉比这里一些更重的库更快。它不包括除了组件之外的其他很多。没有布局或打字系统。取决于你的目标,这可能是一个 plus 或 minus。
周围的`
- 活跃开发: Yes
- 普及: ~3,000星
- 许可证: MIT
- 尺寸: (pre-gzip) 284KB
- 主要开发者: Josephus Paye II
- 文档质量: Thorough
- 文档语言: English
- 主要社区语言: English
- 组件: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs( _*) 动画: **
** 结论(TL;DR)** 如果您需要各种各样的组件,但正在处理其他一切(如布局,打字和工具)自己,这是一个很好的选择。
特别提及
- Muse-UI没有完全列入这个列表,不幸的是,由于英语文档有点难理解。
对设计
蚂蚁设计是中国最受欢迎的设计语言,它是由阿里巴巴创建的,是世界上最大的电子商务公司之一. 蚂蚁设计喜欢熟悉的间隔和提示,有友好的,略有圆形的界面元素. 如果你曾经在手机或桌面上使用过中文应用程序,你可能会注意到他们都有一种熟悉的和一些友好的感觉,选择较小的边缘和明亮的颜色白色。
由于阿里巴巴使用Vue用于各种开发目的,因此没有奇怪的是,有大量的Ant Design UI库可用。
(一)(一)(一)
它是Vue可用的最古老和最知名的UI库之一,此后也被转移到React和Angular。在Eleme(https://www.ele.me/)上的人们最近发布了Element UI的2.0版本,其中包括一个新的主题,提高可用性,Typescript支持,新的图标,以及各种新组件和选项。
它不直接跟随蚂蚁设计,但从中借用了相当多的线索。
周围的`
- 活跃开发: Yes
- 普及: ~20200星
- 许可证:MIT
- 尺寸: (pre-gzip)??? (灵活)
- 主要开发者: Eleme
- 文档质量: Thorough
- 文档语言: 中文(中文),英语, 西班牙语(即将到来)
- 主要社区语言: 中文(https://github.com/ElemeFE) (英语是接近第二版本,中文是通过机器人自动翻译成英语的版本。(_M
** 结论(TL;DR)** 元素有点重。它有你可能需要的一切,还有更多。一些公约有点奇怪,但它做得很好,涵盖了大多数用例。元素的组件和功能的质量很难被打败,它对于从快速抛弃项目到大型网站和应用程序的任何事情都非常方便。
与Element一样,iView包含大量的组件,大致遵循 Ant 设计语言,它还包含一些社区工具来处理主题和自定义 webpack 加载器,目前正在积极开发中。
周围的`
- 活跃开发: Yes
- 普及: ~11100星
- 许可证:MIT
- 尺寸: (pre-gzip) 656KB
- 主要开发者: Alipay 和 Aresn
- 文档质量: Thorough
- 文档语言: 中文(中文),英语
- 主要社区语言: 中文(中文)(https://intl.alipay.com/) (英语是接近第二个和中文版本是自动翻译成英语。通过机器人.)(_MK
** 结论(TL;DR)** iView 是一个有价值的竞争对手 元素 拥有大量的高质量部件可用. 然而,它在体重部门因此受苦。
特别提及
- AT-UI看起来像是另一个 Ant Design 图书馆的一个很好的开始,有很好的文档和一些轻微的风格差异,使其组件脱颖而出。不幸的是,它仍然很早,组件数量有限。观看这个空间
- fish-ui有一个干净的,毫无意义的风格,一些组件已经可用。
其他
有几个组件集合不适合上面的类别,但也值得一看。
( )( )( )( )
建立在Bulma的顶部(https://bulma.io/),Buefy尽可能地试图走出你的道路,只提供与Bulma风格工作所需的逻辑。因此,它相当轻,但仍然看起来很棒。
周围的`
- 活跃开发: Yes
- 普及: ~1,600星
- 许可证: MIT
- 尺寸: (pre-gzip) 385KB
- 主要开发者: Rafael Beraldo
- 文档质量: Good
- 文档语言: English
- 主要社区语言: English
- 组件: Inputs, Advanced Inputs, Indicators, Navigation, Dialogs, Layout
- 动画
** 结论(TL;DR)** Buefy非常适合当你需要一些有趣和灵活的用户界面组件为你的网站。
( )
值得尊敬的 Bootstrap又回到了版本4中,看起来比以往任何时候都更瘦。Vue社区从未被遗弃,已经回应了BootstrapVue,一个库,用适当的Vue组件取代Bootstrap 4的jQuery部分,并添加了大量其他有用的比特。
周围的`
- 活跃开发: Yes
- 普及: ~3,000星
- 许可证: MIT
- 尺寸: (pre-gzip) 315KB(188KB + Bootstrap 4 CSS)
- 主要开发者: Pooya Parsa & Troy Morehouse)
- 文档质量: Thorough
- 文档语言: English
- 主要语言社区: English
- 组件: **Inputs, Indicators, 导航
** 结论(TL;DR)** 如果你喜欢 Bootstrap,你可能会喜欢 BootstrapVue. 它非常适合主要用于桌面和 / 或键盘系统的网站。 在移动或更先进的应用程序上,你的里程碑可能会有所不同。
如果您认为缺少或应该添加任何内容,或者想告知我们您选择的组件库,我们很乐意从您那里听到(/contact/)。