1、前言
一转眼已经是2023年了,作为前端开发工程师,我们一起盘点一下各个大厂使用的前端UI组件库吧。
2、华为云
2.1、OpenTiny
- 官网:https://opentiny.design/
- 技术栈:Vue、Angular
- 平台:PC中后台
OpenTiny 是华为云云岭团队最新开源的前端品牌,提供跨端、跨框架、跨版本的 UI 组件库、开箱即用的管理系统模板和覆盖前端开发全流程的 CLI 工具,帮助开发者高效搭建 Web 应用。
可以看到 opentiny
提供了 TinyVue
和 TinyNG
两套UI组件库,分别对应了 Vue
和 Angular
两套技术栈,属于华为云出品的企业级设计体系,如果有用过华为云的小伙伴应该会比较熟悉,它的控制台页面就是使用的这套设计体系的组件库搭建的。
Vue
想必大家都很熟悉,不过国内的 Angular
技术栈的组件库确实很少见。
2.2、DevUI
- 官网:https://devui.design/home
- 技术栈:Angular(同时提供 Vue、React 对应版本)
- 平台:PC中后台
DevUI 是华为云 DevUI 团队出品的一套组件库系列,属于比较早开源的一批组件库,主打 Angular
技术栈的 UI 组件库,通过开源建设也形成了 Vue
和 React
技术栈的组件库。
DevUI 适用于企业级中后台项目,设计风格和 OpenTiny 比较相似,应该都是出自同一套规范。
3、腾讯
3.1、TDesign
- 官网:https://tdesign.tencent.com/
- 技术栈:Vue、React
- 平台:PC、Mobile、小程序
TDesign 是腾讯出品的企业级设计体系,支持 Vue
和 React
技术栈,同时还支持微信小程序和 QQ 小程序,也算是腾讯系的一大特色。
4、阿里
4.1、Ant Design
- 官网:https://ant.design/index-cn
- 技术栈:React(同时提供 Vue、Angular 对应版本)
- 平台:PC中后台
蚂蚁大名鼎鼎的 Antd,应该是很多 React
初学者和开发者一定用过的一套组件库,有着丰富的组件、完善的文档和演示,可以通过其组件的设计学习很多 React
编码思想。
通过社区合作,Antd 也推出了 Vue
版本和 Angular
版本,也是国内除了华为外少有的 Angular 组件库。
Antd 的设计风格保持了简洁、清新的风格,在 5.0 版本之后更是获得更加灵活地定制能力,API 设计也更加简洁,总之是一款非常值得使用的组件库。
4.2、Element UI
- 官网:https://element-plus.gitee.io/zh-CN/
- 技术栈:Vue
- 平台:PC中后台
来自饿了么团队提供的一套 Vue
组件库,属于我学习 Vue
的启蒙 UI 组件库了,在饿了么被阿里收购后,也算作阿里的一套组件库了,在 Vue
领域内也是一个影响力十分深远的 UI 组件库,仔细阅读其 API,发现竟然和 Antd 有异曲同工之妙。
如果你的项目是基于 Vue
,不妨考虑一下 Element UI。
5、字节
5.1、Arco
- 官网:https://arco.design/
- 技术栈:React、Vue
- 平台:PC企业级中后台
字节的中后台 UI 组件库,基本是字节自己的业务投在用,设计风格很现代,API 很友好。整体体验下来 React
技术栈的组件库更完善一点,Vue
次之。也是款很不错的前端 UI 组件库,有兴趣可以尝试一下。
5.2、semi design
- 官网:https://semi.design/zh-CN/
- 技术栈:React
- 平台:PC
抖音前端团队推出的基于 React
技术栈的组件库,非常年轻化的设计,整个组件库显得生动活泼。组件文档丰富且细致,提供了设计文档和用法的说明,组件的 demo
还提供了可实时编辑代码的能力。该组件库在抖音和字节内部也被用在了很多项目上。
6、总结
目前各大厂的组件库都趋于完善,常用的组件、国际化、图标、主题配置等能力都基本具备,更多的差异点在于各自组件库与自身业务的结合,例如华为云的组件库更多侧重于 Angular
技术栈,因为其内部众多云服务的页面使用了 Angular
技术栈开发,而腾讯的组件库提供了微信小程序和 QQ 小程序的版本,阿里和字节更是在技术上不断地深入探索,并且有着自己鲜明的特点。学习和使用大厂的组件库,一方面可以简化我们的开发工作,另一方面也能学习到组件的 API 设计思想,从而在未来的业务代码开放中培养一个更好的设计思维。
PS: 本文只是简单盘点了一下当前各大厂的前端组件库,如果有遗漏欢迎在评论区补充。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。