盘点国内大厂的前端组件库有那些？

1、华为云

1.1、OpenTiny

• 官网：https://opentiny.design/
• 技术栈：Vue、Angular
• 平台：PC中后台

        OpenTiny 是华为云云岭团队最新开源的前端品牌，提供跨端、跨框架、跨版本的 UI 组件库、开箱即用的管理系统模板和覆盖前端开发全流程的 CLI 工具，帮助开发者高效搭建 Web 应用。 可以看到 opentiny 提供了 TinyVue 和 TinyNG 两套UI组件库，分别对应了 Vue 和 Angular 两套技术栈，属于华为云出品的企业级设计体系，如果有用过华为云的小伙伴应该会比较熟悉，它的控制台页面就是使用的这套设计体系的组件库搭建的。

1.2、DevUI

• 官网：https://devui.design/home
• 技术栈：Angular（同时提供 Vue、React 对应版本）
• 平台：PC中后台

        DevUI 是华为云 DevUI 团队出品的一套组件库系列，属于比较早开源的一批组件库，主打 Angular 技术栈的 UI 组件库，通过开源建设也形成了 Vue 和 React 技术栈的组件库。DevUI 适用于企业级中后台项目，设计风格和 OpenTiny 比较相似，应该都是出自同一套规范。

2、腾讯

2.1、TDesign

• 官网：https://tdesign.tencent.com/
• 技术栈：Vue、React
• 平台：PC、Mobile、小程序

        TDesign 是腾讯出品的企业级设计体系，支持 Vue 和 React 技术栈，同时还支持微信小程序和 QQ 小程序，也算是腾讯系的一大特色。

3、阿里

3.1、Ant Design

• 官网：https://ant.design/index-cn
• 技术栈：React（同时提供 Vue、Angular 对应版本）
• 平台：PC中后台

        蚂蚁大名鼎鼎的 Antd，应该是很多 React 初学者和开发者一定用过的一套组件库，有着丰富的组件、完善的文档和演示，可以通过其组件的设计学习很多 React 编码思想。通过社区合作，Antd 也推出了 Vue 版本和 Angular 版本，也是国内除了华为外少有的 Angular 组件库。Antd 的设计风格保持了简洁、清新的风格，在 5.0 版本之后更是获得更加灵活地定制能力，API 设计也更加简洁，总之是一款非常值得使用的组件库。

3.2、Element UI

• 官网：https://element-plus.gitee.io/zh-CN/
• 技术栈：Vue
• 平台：PC中后台

        来自饿了么团队提供的一套 Vue 组件库，属于我学习 Vue 的启蒙 UI 组件库了，在饿了么被阿里收购后，也算作阿里的一套组件库了，在 Vue 领域内也是一个影响力十分深远的 UI 组件库，仔细阅读其 API，发现竟然和 Antd 有异曲同工之妙。如果你的项目是基于 Vue，不妨考虑一下 Element UI。

4、字节

4.1、Arco

• 官网：https://arco.design/
• 技术栈：React、Vue
• 平台：PC企业级中后台

        字节的中后台 UI 组件库，基本是字节自己的业务投在用，设计风格很现代，API 很友好。整体体验下来 React 技术栈的组件库更完善一点，Vue 次之。也是款很不错的前端 UI 组件库，有兴趣可以尝试一下。

4.2、semi design

• 官网：https://semi.design/zh-CN/
• 技术栈：React
• 平台：PC

        抖音前端团队推出的基于 React 技术栈的组件库，非常年轻化的设计，整个组件库显得生动活泼。组件文档丰富且细致，提供了设计文档和用法的说明，组件的 demo 还提供了可实时编辑代码的能力。该组件库在抖音和字节内部也被用在了很多项目上。

5、总结

        目前各大厂的组件库都趋于完善，常用的组件、国际化、图标、主题配置等能力都基本具备，更多的差异点在于各自组件库与自身业务的结合，例如华为云的组件库更多侧重于 Angular 技术栈，因为其内部众多云服务的页面使用了 Angular 技术栈开发，而腾讯的组件库提供了微信小程序和 QQ 小程序的版本，阿里和字节更是在技术上不断地深入探索，并且有着自己鲜明的特点。学习和使用大厂的组件库，一方面可以简化我们的开发工作，另一方面也能学习到组件的 API 设计思想，从而在未来的业务代码开放中培养一个更好的设计思维。