首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在2018年你应该知道的11个Vue.js组件库

与React和Angular不同的是,Vue.js由Evan You作为一个开源项目通过众包来维护,也就说这使Vue.js成为更好的一部分,因为它鼓励你“写出质量更好的代码和更好的文档...”。在接近8万个星星,被Adobe,Gitlab和其他公司所使用,Vue的受欢迎程度超过了预期,似乎还在继续增长。

Vue成功的一大部分在于其组件。使用组件意味着你可以独立思考每个UI片段,鼓励可重用性和模块化,并帮助保持UI的一致性。所有的Vue组件也都是Vue实例,所以接受相同的选项对象(除了一些root-specific的选项)并提供相同的生命周期钩子。

组件也可以与Bit共享连接起来,就像Git,Yarn和NPM这样的工具,以形成存储库之间的无摩擦代码共享体验。您可以将任何Git存储库中的组件分离出来,并将其快速分享给动态和可固定的组件集合。从那里,组件可以被单独发现并与包装管理者一起使用,如Yarn/NPM,或者在任何存储库中进行进一步修改。

1. Vuetify

在超过7k的星星,Vuetifyjs根据Material设计规范提供UI布局。 Vuetifyjs的V1.0 Alpha版本提供了超过80个的reusbale组件,其中包含一个易于记忆的语义设计,它基于类型即讲的属性,名称简单明了。

2. Vue Material

一个Vue组件库实现Google的Material像素设计。在5k星级中,它提供了适合所有现代Web浏览器的内置动态主题的组件,以及使其API尽可能简单的明确目标。

3. Keen UI

虽然受Material UI规范的启发,但Keen-UI并不是真正的Material UI库。Keen UI不是一个CSS框架,不包括网格系统或排版风格,而是需要Javascript的UI组件。

4. Element

在21k星星的广泛流行Vue 2.0网络工具包提供了丰富的可定制组件的选择。尽管对于讲中文的人来说文档可能会更简单,但是这个组件库拥有一个生动的生态系统,为下一个Vue UI库提供了强有力的选择。

5. Buefy

Buefy提供了用Vue.js和Bulma构建的组件。Buefy的星星数在接近2k,提供了即装即用的轻量级组件。虽然组件选择有点有限,但是都值得你试一下。

6. Bootstrap-Vue

在3k星级的bootstrap-vue中,您可以使用Vue.js和Bootstrap4构建移动优先的响应式用户界面。可用于Vue.js 2.4+,它具有自动WAI-ARIA辅助功能标记。

7. AT-UI

专门为桌面应用程序构建,AT-UI提供了一个npm + webpack + babel前端开发工作流程。尽管文档(再次)对于英语用户来说可能是有挑战性的,但它提供了一个体面的,干净整洁的UI组件。

8. Fish-UI

Fish-UI是webpack和ES2015协同工作的工具包。几乎没有文件,这个组件库给你最大的惊喜是有着超过35个组件的丰富的选择,一个干净和基本的界面的良好结构。

9. Quasar

超过4k星级,这个流行的框架包括用Vue构建的几十个Vue.js组件,以及为响应式Web应用程序和混合移动应用程序提供的丰富功能选项。组件是作为Web组件编写的,所以它们嵌入了HTML,CSS和Javascript代码,只需在页面和布局模板中包含一个HTML标记即可使用。

10. Muse UI

在5k星级Muse-UI是Vue.js 2.0的一个Material Design UI库。虽然你可能也需要在这里讲中文,但是对于那些我们寻求Vue.js的Material设计的人来说,这些严格的组件是很强的。

11. Vux

在10k星级,Vux是一个广受欢迎的移动应用组件库,受WeChat的weUI的启发。Vux的文档是中文的,也有提供英文版本。每一个组件都可以通过带有“移动”模拟演示的文档交互式地呈现。

其他组件

单个组件可以在流行的awesome-vue项目中找到。在组件和库下,要保持UI的一致性,避免重复,避免将整个库添加到项目中,还可以将Bit添加到任何库,以便使用NPM / Yarn轻松快速地从库中提供单个组件。

无论你选择一个库还是设计自己的组件,2018年Vue.js似乎都是你下一个应用程序的强大竞争者,它提供了一个轻松,轻量级且多功能的框架。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180124A0XIX800?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券