主流移动端组件库的对比和分析

随着前端的发展，组件库也是层出不穷，一个完善的组件库能极大提高开发效率，让开发者只需要专注于业务逻辑，而不需要考虑基础组件复用性、扩展性、稳定性的问题。面对众多的组件库，该如何进行选择呢？本篇将从多个角度对现在流行的移动端组件库进行对比与分析，希望对大家有所帮助。

背景

NutUI3.x 发布以来，无论是集团内部还是外部开发者，使用者越来越多，京东集团内累计应用的项目数超过 200+。NutUI 也逐步增加了主题定制、国际化等能力。NutUI 在不断新增组件、扩展能力的同时，也注意到了「组件粒度」的完善度，组件库就好比一座大楼，组件则是其地基，重要性就不言而喻了。所以在 2022 年初我们完成了主流组件库的差异性对比，向优秀组件库学习，找出不足，快速补齐每一个组件粒度的能力。

从主流组件库中精挑细选了 6 款进行对比与分析：

• NutUI - 京东研发的移动端 UI 组件库，支持 Vue3、Taro 多端适配，面向电商业务场景
• Vant - 有赞研发的移动端 UI 组件库，支持 Vue3、微信小程序、支付宝小程序
• TDesign Mobile - 腾讯研发的移动端组件库，适合在 Vue3 技术栈项目中使用
• Ant Design Mobile - 蚂蚁金服研发的移动端组件库，支持 React
• Mand Mobile - 滴滴研发的面向金融场景的 UI 组件库，支持 Vue3
• Varlet - Vue3 开发的 Material 风格移动端组件库，由社区的小伙伴开发和维护

初步了解

先简单从技术栈、开源时间、组件数量、Npm 下载量、GitHub Star 数几个方面对上述组件库有一个初步掌握：

组件库	技术栈	开源时间	组件数量	Npm 下载量	GitHub Star
NutUI	Vue	2018	75+	68,184	4,457
Vant	Vue	2017	68+	4,129,547	19,759
Ant Design Mobile	React	2016	70+	4,947,714	10,334
TDesign Mobile	Vue	2021	47+	2,316	55
Mand Mobile	Vue	2018	48+	357,272	3,271
Varlet	Vue	2021	50+	27,567	2,845

（注：Npm 下载量统计的截止时间为：2022年6月20日）

从上面的表格不难发现，React 技术栈的移动端组件库相对较少，Vue 技术栈组件库相对较多。

NutUI 组件库虽然在组件数量上是第一位的，但是在 Npm 下载量、GitHub Star 上相较一流组件库还有一定距离。这也督促我们在后一阶段更要强调组件质量、开发体验和口碑，前一阶段主要以完成功能满足集团业务开发为目的。

组件对比

为了让 NutUI 更加的健壮，将 NutUI 中的每个组件与其他组件库的组件相对应，从组件的使用文档、功能点、API 等角度一一分析，找出不足，及时完善💪。

使用文档

• NutUI
  从组件「介绍」、「引入方式」、「代码演示」、「 API 」、「常见问题」几方面对组件进行描述。其中，在组件的代码演示中，每一个示例都加入了 Codesandbox、自主研发的 Codehouse 在线代码调试，方便使用者更直观、快捷的了解组件。

  

• Vant