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

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

背景

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 下载量统计的截止时间为：2022年6月20日）

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

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

组件对比

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

使用文档

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

  

• Vant
  从「介绍」、「引入方式」、「代码演示」、「 API 」、「主题定制（CSS 变量配置）」、「常见问题」几个方面对组件进行描述，与其他组件库相比，展示内容是最全面的。 Vant 暂时没有提供组件的在线代码调试功能，使用者只能放到项目中体验。

  

• Ant Design Mobile
  从「介绍」、「示例」、「 API 」、「 FAQ 」 四个方面对组件进行描述。其中，在 Ant Design Mobile 的每个示例中包含了多个 Demo 演示，在使用时，使用者需要进行筛序，没有一个示例一个代码演示更直观。

  

• TDesign Mobile
  从「介绍」、「示例」、「 API 」三方面对组件进行描述。其中，每一个示例都加入了 Stackblitz 在线代码调试。与其他组件库不同的是，在每个组件的使用文档中加入了快速进入此组件 Issue 的入口，对于使用者还是非常友好的。

  

• Mand Mobile
  从「介绍」、「示例」、「 API 」三方面对组件进行描述。Mand Mobile 的文档描述很简单，在 Demo 示例中也很难看到一行字。

  

• Varlet

  从「介绍」、「示例」、「 API 」三方面对组件进行描述。其中，每一个示例都加入了 Varlet 自研的 Varlet UI Playground 在线代码调试。与其他组件库不同的是，Varlet 的每个示例都加入了折叠功能。

  

组件文档描述是使用者了解组件的重要途径之一，以上组件库都有各自的优点、也有各自的不足。

对比下来，NutUI 在对每个示例的说明方面还是不足的，这个问题会在后续的发版中慢慢改善。

除此之外，组件暴露的 API 可能就决定了该组件是否满足当前的业务场景，接下来看一下每个组件库暴露 API 的情况。

API

咱们先来看一组数据：每个组件库中所有组件暴露 API 的数量

从上面的数据可以看出，暴露组件的 API 最多的是 Vant，虽然 NutUI 的组件数量比 Vant 高，但是每个组件的平均 API 数却没有 Vant 的高。可见 NutUI 在组件暴露的 API 数量上是有不足的，依次对比每个组件，查找所欠缺的 API 势在必行。

当然，也不能盲目的添加 API，相同的组件，但是设计思路不同，有些 API 也就没有添加的必要，需要三思而后行的。

通用能力

仅仅是关注每个组件是不够的，还要放大格局，关注组件库的通用能力，尽可能满足开发者诉求。

NutUI

近一年，NutUI 不断扩充组件功能，Vscode 插件智能提示插件、自主研发的在线编辑器 CodeHouse、主题定制以及在线主题定制、国际化均已支持。

• NutUI Vscode 智能提示插件

  为开发者提供的福利，实现智能引出 API 和自动补全，提升开发者体验。

  

• 在线主题定制

  允许用户在开发阶段切换不同主题风格的皮肤，也允许开发者对指定的组件直接进行样式修改，以满足不同设计风格的移动端业务场景。

  

Vant

Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。Vant 同样具备主题定制、在线主题预览工具、国际化等能力。

• 在线主题预览工具

  vant-theme 是一个 vant 组件库在线主题预览工具，通过提供的样式变量进行修改，及时反馈修改后的样式。

  

Ant Design Mobile

Ant Design Mobile 5.0 版本是一次彻底的重做，它带来了全新的设计体验和 100% 重写的组件代码实现，更换了全新的 logo，进入新的篇章。Ant Design Mobile 具备主题定制、国际化的能力。同时，它也具有在线编辑的能力，只是比较隐蔽而已(在线体验)。

TDesign Mobile

TDesign Mobile Vue 发布时间不长，所以国际化、主题定制等能力暂不支持，相信在不久的将来，这些能力都会加入。虽然 TDesign Mobile Vue 没有自主研发的在线编辑器，但已经成功接入到了 Stackblitz 在线编辑器中。

Mand Mobile

Mand Mobile 默认提供了一套基于滴滴的金融业务设计规范的 UI 主题，同时也是支持主题定制功能的，主题定制功能的设计思路与 Vant 是一致的。

Varlet

Varlet 提供了针对 webstorm 和 vscode 的组件高亮能力，同时还为 vscode 单独提供了一个辅助插件。Varlet 还自主研发了 Varlet UI Playground 在线调试工具。 使用者可以用过 StyleProvider 组件或改变 CSS 变量来完成主题定制。

不难看出，在线调试工具、国际化、主题定制、Vscode 插件等能力，已经成为一个组件库不可或缺的能力。

特性

下面在来看看每个组件的内部实现逻辑。

Icon 图标

Icon 作为 UI 构成中重要的元素，一定程度上影响 UI 界面整体呈现出的风格。对于组件库来说，放入大量的图片会严重影响包体积，如何处理大量的图标，便成了组件库设计的一大难题。从上面的图表可以看出，6 款组件库实现方式分为 2 种：

• IconFont 图标库

  NutUI、Vant、Varlet 组件库都是基于 IconFont 图标库实现的，最终作为一种字体进行渲染，通过 CSS 可直接控制图标的大小（使用 font-size）、颜色、阴影、旋转等，使用简单方便。

  NutUI、Vant 使用是有不同的，在 IconFont 生成自定义的 Icon 文件后，NutUI 是将下载的文件放到了与 NutUI 组件开发同一个仓库中，而 Vant 则是将下载的文件放到了一个新的仓库中，生成了 @vant/icons 包。

  

  Vant 的处理方式方便使用者可以单独使用、Vant 的衍生产品也可以复用，但对于组件开发者而言，现有 Icon 一旦不满足，添加新的 Icon，就需要重新发版，进行版本管理，从这个角度看， NutUI 的处理方式会更加便捷。

  两者处理方式各有利弊，可根据组件库的框架与规划进行选择，扬长避短。

• SVG 渲染

  Ant Design Mobile 与 TDesign Mobile 组件库中的图标则是单独的 NPM 包，想要使用需要单独安装。 最终以 SVG 的形式进行渲染。而 Mand Mobile 则直接使用 svg-sprite-loader 进行 SVG 图标渲染。

  SVG 同样可以使用 CSS 进行控制，更赞的是还可以控制 SVG 特有的属性，比如描边。不仅如此，SVG 是真实的矢量图，可以保证在任何情况下都不失真。但是兼容性方面，就不及 Icon Font 的渲染形式，Icon Font 就算是在 IE6 下也正常渲染。

  

打包/构建工具

6 款组件库分别使用 Vite、Rollup、Gulp 进行打包，其中，Vite 是使用最多的。 Vite 作为新一代的前端构建工具，在生产中同样是利用 Rollup 作为打包工具，TDesign Mobile、Mand Mobile 则直接使用 Rollup 进行打包，可见 Rollup 很重要。

CSS 变量

CSS 变量即自定义属性，它包含的值可以在整个文档中重复使用，由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）。通常的最佳实践是定义在根伪类 :root 下

:root {
  --main-bg-color: white;
}

Vant、Ant Design Mobile、TDesign Mobile、Varlet 就是通过丰富的 CSS 变量来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题等效果。

生态建设

其实，组件库的开发者，同时也是组件库的产品经理，都希望组件库可以覆盖更多的业务场景、支持更多的技术栈、具备更多的能力，所以每个组件库都在不断地探索组件库的可能性，让其不断地繁衍出更多的产品。

NutUI

NutUI 团队经过不断地努力，现已经有 6 款针对不同场景的衍生产品。

• NutUI - 京东风格的移动端 Vue 组件库
• NutUI-React - 京东风格的 React 移动端组件库
• NutUI-JDT - 京东科技风格的移动端组件库
• NutUI-JDL - 京东物流风格的移动端组件库
• NutUI-Bingo - 助力营销活动和小游戏场景
• NutUI-Cat - 一款移动端大促场景的业务组件库

同时，为了给开发者提供更高效便捷的开发方式，NutUI 和 Taro 二者结合，不仅可以让开发者一处代码，多端运行，畅快自如地开发小程序。更可以在开发过程中，使用到更美观、更便捷、组件更丰富的组件库。我将 NutUI 和 Taro 更完美地接合到一起，Taro 官方将 NutUI 作为 Vue 技术栈的推荐组件库。现在开发者将可以使用 NutUI 无缝开发 H5 和多端小程序。NutUI 提供了 70+ 组件涵盖了日常业务开发使用的大部分组件。

Zan Design System

Zan Design System 服务于 SaaS 产品的设计体系。目前官网维护的有 3 款组件库

• Zent - Zent ( \ˈzent\ ) 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。
• Vant - 轻量、可靠的移动端 Vue 组件库
• Vant Weapp - 轻量、可靠的小程序 UI 组件库

社区团队维护的有 2 款组件库

• React Vant - 参照 Vant 设计规范打造的 React 框架移动端组件库。

• Vant Aliapp - 移动端 Vue 组件库 Vant 的支付宝小程序版本

  

Ant Design

Ant Design 的生态建设的很全面，主要用于研发企业级中后台产品，目前维护的产品很多，但是大部分的产品还是应用在 PC 端，移动端的产品相比较就少一些

• Ant Design Mobile - 移动端 React 组件库

• Ant Design Mini - 支付宝小程序 UI 组件库

  

TDesign

TDesign 官网致力于打造企业级设计体系，可见 TDesign 的产品很多。但移动端的产品大部分还是处于待上线状态，已经发布的移动端产品有 3 个

• TDesign Mobile Vue - 适配移动端的 Vue 组件库，现还处于 Alpha（内测）阶段
• TDesign Miniprogram - TDesign 微信小程序组件库，现处于 Beta（快速迭代）阶段

• TDesign QQ Miniprogram - TDesign QQ 小程序组件库，现还处于 Alpha（内测）阶段

  

Mand Mobile

Mand Mobile 是滴滴出行开发的面向金融场景的 Vue 组件库，移动端产品有 3 个

• Mand Mobile - 面向金融场景的 Vue 移动端 UI 组件库
• Cube UI - 基于 Vue.js 实现的精致移动端组件库

• Pile.js - 基于 React 的移动端开发组件库，Pile.js 1.x 版本口碑还是不错。

  

最后

NutUI 通过与其他组件库的对比，发现不足的同时，也发现了组件库的闪光点。NutUI 组件能力不足在年初开始，现在已经接近尾声，相信开发者会慢慢体会 NutUI 的变化。

最后，希望这篇文章能够对你提供到帮助。一个组件库做成功，方方面面都需要做到极致，NutUI 也会取长补短，不断完善，为开发者带来极致的体验。欢迎加入到 NutUI 这个大家庭中，让它发挥更大的价值~

如果在开发中遇到问题，可随时提 issue，NutUI 团队的同学都会认真对待并解决问题。如您有好的组件，业务类、通用类的都可，都可向 NutUI 组件库提交 PR，非常欢迎大家参与共建。

期待您的使用与反馈 ❤️~