今天给大家分享一下前端人必知的七个常用的UI组件库,这些组件库相信有不少的小伙伴正在使用。每个组件库的来源背景和风格功能都不尽相同,值得大家尝试一波。
今天分享的七个UI组件库分别为:
Arco Design
Taro UI
Semi Design
Ant Design
Element
View Design
Vant
网站资源链接在本文最后面哦~
1. Arco Design
Arco Design
是 字节跳动
出品的企业级设计系统,也是个人十分喜欢的一款组件库
当然,他不仅仅是组件库
它还有Arco Design Pro
这样开箱即用且美观的中后台前端解决方案
它同时提供了React
和 Vue
两个版本的使用文档
2. Taro UI
Taro UI
是由 京东·凹凸实验室
倾力打造的多端开发解决方案。
使用Taro
,我们可以只书写一套代码,再通过Taro
的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、RN等)运行的代码
Taro
的特性:
基于
Taro
开发 UI 组件一套组件可以在
微信小程序
,支付宝小程序
,百度小程序
,H5
多端适配运行(ReactNative
端暂不支持)提供友好的 API,可灵活的使用组件
3. Semi Design
Semi Design
是由抖音前端团队
,MED 产品设计团队
设计、开发并维护的设计系统。
Semi Design
不仅仅是一套精美的设计系统,还是一款开箱即用的React
组件库,相信很多使用React
开发的小伙伴对它已经并不陌生了
Semi Design
还提供了主题编辑器(DSM)和主题商店,你还可以通过npm
下载主题包,让你对主题的定制变的更加灵活方便!
最关键的是,Semi Design
还采用了跨前端框架技术方案实现、F/A 分层设计,通过重构,可以快速支持除 React 外的通用组件库,比如 Vue
、Svelte
等
同时,Semi Design
还提供了Design to code
(简称D2C
)设计稿转代码功能,支持一键识别 Figma 页面中图层布局 + Semi 组件,像素级还原设计稿,转译为JSX
和 CSS
代码,快捷预览, 无需从 0 开发,很强大有木有!
4. Ant Design
Ant Design
是蚂蚁集团的企业级产品,其使用者不乏像蚂蚁、阿里巴巴、腾讯、百度、口碑、美团、滴滴等大厂
相信有很多小伙伴对Ant Design
已经很熟悉不过了,不管是Ant Design of React
还是Ant Design of Vue
,都提供了很精美且实用的功能和组件
Ant Design
的特点:
提炼自企业级中后台产品的交互语言和视觉风格
开箱即用的高质量
React
和Vue
组件全面支持使用
TypeScript
开发,提供完整的类型定义文件全链路开发和设计工具体系
数十个国际化语言支持
拥有主题定制的能力
而且,除了Ant Design
,蚂蚁还提供了Ant Design Mobile RN of React
,用于服务移动端
5. Element
不出意外的话,这个组件库是大家使用最为频繁的一款
Element
是由饿了么团队出品的桌面端组件库。发展到现在,其已经实现了对React
和Angular
的支持,同时还提供Sketch
、Axure
模板资源文件方便快速产品设计
Element UI
除了自己的组件库外,还提供了支持V2
的element admin
和支持V3
的element-plus
,同时还有相对应的开发文档和演示地址
6. View Design
View Design
,也就是我们常说的iView
,它提供了诸多比较全面且功能丰富的产品,如:
View UI Plus
:基于 Vue.js 3 的一套 UI 组件库,主要用于企业级中后台系统Admin Cloud
:一套企业级的多租户权限管理开发平台,基于Admin Plus
、iCRUD
和若依
Admin Plus
:一套企业级的通用型中后台前端解决方案,它基于View UI Plus
,适用于V3
iCRUD
: 一套基于View UI Plus
的增强型表格组件,面向配置开发,快速搭建具备 增、删、改、查 功能的表格页面。支持V3
7. Vant
Vant
,由有赞前端团队
开发,是一款轻量、可靠的移动端组件库,于 2017 年开源,是目前在移动端开发中比较主流的一款组件库
Vant
的特点:
提供 60 多个高质量组件,覆盖移动端各类场景
性能极佳,组件平均体积不到 1kb(min+gzip)
单元测试覆盖率 90%+,提供稳定性保障
完善的中英文文档和示例
支持
Vue2
&Vue3
支持按需引入
支持主题定制
支持国际化
支持
TypeScript
支持
SSR
当然,很多小伙伴也使用到了本文没有提到过其他的组件库或者框架,比如被有些小伙伴称之为"YYDS"的Bootstrap
,又或者很多同学在JQuery
时代使用很熟练的layui
,当然,发展到至今,layui
也出了Vue
版本。
还有一些其他的组件库如Zent
组件库、Material
风格的Vuetify
等等我们就不在介绍了。欢迎大家在评论区交流你所使用的组件库是什么