前端人必知的七大UI组件库！

今天给大家分享一下前端人必知的七个常用的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等等我们就不在介绍了。欢迎大家后台私信我你所使用的组件库是什么

网站资源链接

• Arco Design ：网站首页

• Taro UI：网站首页

• Semi Design：网站首页

• Ant Design

  • React文档

  • Vue文档

• Element

  • element-ui

  • element plus

  • element-admin

  • vue-element-plus-admin

• View Design：网站首页

• Vant：网站首页