共计 3380 个字符，预计需要花费 9 分钟才能阅读完成。
前端是一个始终在倒退的名词，从最后刀耕火种时代的页面仔到文艺复兴期间的前端工程化再到现在新时代的大前端，前端技术在某种程度上仿佛能够随心所欲了。然而咱们这次探讨的是前端技术中的一部分—组件库。
什么是组件？为什么要用组件库？
组件是组成页面中最根本的元素，按钮，输入框，下拉抉择都是组件，组件和组件组合就变成了一个更简单的组件。至于为什么要用组件库我想应该是体验了，用户应用体验以及开发人员的开发体验，用户在页面上的交互都是通过组件，一个颜值高的组件能够第一眼吸引用户去点击，这就是用户体验，开发体验更不用说，组件就是同种类型不同交互的封装，是用组件库能够让咱们更专一的针对业务的开发和产品的交互。
上面我就给大家举荐从 HelloGitHub 往期月刊（100+JS 我的项目）中筛选进去的 5 个罕用且风行的企业级组件库。
Ant-Design
类型：基于 React 组件库
官网：https://ant.design/index-cn
GitHub 仓库地址：https://github.com/ant-design…
保护团队：蚂蚁金服体验技术部
ant-design 是我常常应用的组件库之一，蚂蚁开源，大牛保护，4W 多的 Star 让这款组件库成为国内使用率较高的 React 组件库。然而细看这套组件库的灵魂是保护团队提出了一个设计语言的概念，也就是说组件库的所有交互款式都是遵循这套设计语实现的，14px 的主字体，类别的对齐，简洁间接的设计格调都决定了这套组件库在用户体验上的亮眼。
代码层面：组件库由 TS+React 的组合实现，看代码能够晓得，保护团队在开发 ant-design 之前就曾经在保护 rc-components 的仓库了，能够说 ant-design 是对 rc-components 的进一步封装。从学习的角度来说须要相熟 React 高级个性以及 TypeScript 语法。
生态：ant-design 的生态周边比拟好，保护方提供了基于 ant-design 的开箱即用的中台前端 / 设计解决方案，外面包含了一系列中台须要的业务逻辑。而且框架还提供了一套 sketch 组件，这样在设计和出图都会是统一了
iView
类型：基于 Vue 组件库
官网：https://www.iviewui.com/
GitHub 仓库地址：https://github.com/iview/iview
保护团队：Aresn (Talking Data)
iView 是我在写 Vue 的时候应用到的组件库，能够说看了 iView 的源码后对 Vue 的组件开发有了一些意识，iView 是 Aresn 集体发动的 Vue 组件库我的项目，从最开始的单纯的 Vue 组件库到当初的笼罩小程序，中台，挪动端，以及开箱即用的种子我的项目领有一系列的生态。
代码层面：整体文件构造清晰，组件实现也非常分明，template，script 规范 Vue 构造。适宜理解 Vue 后想进一步进阶者学习。
生态：iview-admin(开箱即用的中台解决方案)，iview-Weapp(微信小程序组件库)，iview Run(在线编辑器)
MATERIAL-UI
类型：基于 React 组件库
官网：https://material-ui.com/
GitHub 仓库地址：https://github.com/mui-org/ma…
保护团队：material-ui
material-ui 是基于 Google Material Design[1] 设计语言开发的 React UI 组件库。如同国内的公司较少用这套组件库，感觉扁平化格调看多了后再看 Material 格调有一种眼前一亮的感觉。
material-ui 团队保护频率很高，下图是 material-ui 次要的开发者的 Github 首页
基本上每天的都会有提交，而且最多一天有 36 次的提交。
代码层面：我的项目中蕴含具体的文档、测试、例子，然而具体的代码细节我还要进一步钻研?
生态：Material-UI Pickers(日期，工夫选择器)
ElementUI
类型：基于 Vue 的组件库
官网：https://element.eleme.cn/#/zh-CN
GitHub 仓库地址：https://github.com/ElemeFE/el…
保护团队：饿了么 FE
ElementUI 是饿了么基于 Vue 开发的桌面端组件库，目前官网显示最新版本为 2.9，我过后应用的是 2.5 版本。ElementUI 也提供了设计准则[2]，组件库整体设计格调扁平化，并且能够定制本人主题色彩。组件数量上根本笼罩了中台日常须要应用的组件
代码层面：文件构造清晰，组件的定义简洁明了，适宜学习
生态：mint-ui[3] (Mobile UI elements for Vue.js) element-angular[4] (element angular 版本) element-react[5] (React 版本)
Taro
类型：多端开发框架
官网：https://taro.aotu.io/
GitHub 仓库地址：https://github.com/NervJS/taro
保护团队：京东凹凸实验室
Taro 是一款应用 React 开发方式开发跨度利用框架。一次编写多端运行，提供了 H5、小程序、RN 组件库。目前最新版本在小程序以及 H5 RN 开发体验也是非常好的。
生态：官网提供了物料市场，组件库，如果写小程序能够举荐尝试
有赞 vant
举荐指数：star:13.7k
实用：挪动端
网站地址:https://youzan.github.io/vant
GitHub 地址：:https://github.com/youzan/vant
Vant
是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant，能够疾速搭建出格调对立的页面，晋升开发效率。目前已有近 50 个组件，这些组件被宽泛应用于有赞的各个挪动端业务中。Vant 旨在更快、更简略地开发基于 Vue 的好看易用的挪动站点。
Mint UI
星星指数：star:15.7k
实用：挪动端
官网地址：http://mint-ui.github.io/#!/zh-cn
GitHub 地址：https://github.com/ElemeFE/mi…
mintui 两三年没更新了。个人感觉还是不必吧，因为星星有 15.7k，就先记录一下
滴滴 cube-ui
举荐指数：star:8k
实用：挪动端
网站地址:https://didi.github.io/cube-ui/
GitHub:https://github.com/didi/cube-ui
介绍：基于 Vue.js 实现的粗劣挪动端组件库
vux
举荐指数：star:17k
实用：挪动端
官网地址：https://vux.li/
GitHub 地址：https://github.com/airyland/vux
介绍：VUX 是基于 WeUI 和 Vue.js 的 挪动端 UI 组件库, 提供丰盛的组件满足挪动端 (微信) 页面罕用业务需要。
vuetify
https://muse-ui.org/#/zh-CN
举荐指数：star:25.4k
实用：挪动 PC 多端反对
GitHub 地址：https://github.com/vuetifyjs/…
官网地址：https://vuetifyjs.com/zh-Hans/
Vuetify 的确是一款十分粗劣的 UI 框架，它提供了很多罕用的组件，依附 Material Design 的设计劣势，让你无需编写一行 css 代码就能够失去十分好看的界面性能。响应式做的不错，挪动 PC 多端反对，配置灵便，组件也挺多的，足够古代，性能全面 vuetify，始终用一爽快，强烈推荐 vuetify。
[Muse UI]
https://muse-ui.org/#/zh-CN
社区人员保护的一套 UI 框架。
References
[1] Material Design: https://material.io/design/
[2] 设计准则: https://element.eleme.cn/2.5/…
[3] mint-ui: https://github.com/ElemeFE/mi…
[4] element-angular: https://github.com/ElemeFE/el…
[5] element-react: https://github.com/ElemeFE/el…