关于前端:主流移动端组件库的对比和分析

随着前端的倒退，组件库也是层出不穷，一个欠缺的组件库能极大进步开发效率，让开发者只须要专一于业务逻辑，而不须要思考根底组件复用性、扩展性、稳定性的问题。面对泛滥的组件库，该如何进行抉择呢？本篇将从多个角度对当初风行的挪动端组件库进行比照与剖析，心愿对大家有所帮忙。

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 最多的是 Vant，尽管 NutUI 的组件数量比 Vant 高，然而每个组件的均匀 API 数却没有 Vant 的高。可见 NutUI 在组件裸露的 API 数量上是有有余的，顺次比照每个组件，查找所欠缺的 API 势在必行。

当然，也不能自觉的增加 API，雷同的组件，然而设计思路不同，有些 API 也就没有增加的必要，须要三思而后行的。

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

近一年，NutUI 一直裁减组件性能，Vscode 插件智能提醒插件、自主研发的在线编辑器 CodeHouse、主题定制以及在线主题定制、国际化均已反对。

NutUI Vscode 智能提醒插件

为开发者提供的福利，实现智能引出 API 和主动补全，晋升开发者体验。
在线主题定制

容许用户在开发阶段切换不同主题格调的皮肤，也容许开发者对指定的组件间接进行款式批改，以满足不同设计格调的挪动端业务场景。

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

在线主题预览工具

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

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

TDesign Mobile Vue 公布工夫不长，所以国际化、主题定制等能力暂不反对，置信在不久的未来，这些能力都会退出。尽管 TDesign Mobile Vue 没有自主研发的在线编辑器，但曾经胜利接入到了 Stackblitz 在线编辑器中。

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

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

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

上面在来看看每个组件的外部实现逻辑。

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 变量即自定义属性，它蕴含的值能够在整个文档中重复使用，由自定义属性标记设定值（比方：–main-color: black;），由 var() 函数来获取值（比方：color: var(–main-color);）。通常的最佳实际是定义在根伪类 :root 下

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

Vant、Ant Design Mobile、TDesign Mobile、Varlet 就是通过丰盛的 CSS 变量来组织款式，通过笼罩这些 CSS 变量，能够实现定制主题等成果。

其实，组件库的开发者，同时也是组件库的产品经理，都心愿组件库能够笼罩更多的业务场景、反对更多的技术栈、具备更多的能力，所以每个组件库都在一直地摸索组件库的可能性，让其一直地繁殖出更多的产品。

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 服务于 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 的生态建设的很全面，次要用于研发企业级中后盾产品，目前保护的产品很多，然而大部分的产品还是利用在 PC 端，挪动端的产品相比拟就少一些

Ant Design Mobile – 挪动端 React 组件库
Ant Design Mini – 支付宝小程序 UI 组件库

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

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

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，十分欢送大家参加共建。

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

关于前端:主流移动端组件库的对比和分析

背景

初步理解

组件比照

应用文档

API

通用能力

NutUI

Vant

Ant Design Mobile

TDesign Mobile

Mand Mobile

Varlet

个性

Icon 图标

打包 / 构建工具

CSS 变量

生态建设

NutUI

Zan Design System

Ant Design

TDesign

Mand Mobile

最初