2021 年前端框架与 UI 组件库盘点

先厘清概念：平时说的 JS 是语言（JavaScript），标准是 ECMAScript，在编程语言排行榜上已经升到第 7 位；框架是搭在语言之上的东西。严格讲的前端框架要同时覆盖 HTML、CSS、JS 三个层面，所以说 Bootstrap、Foundation 算框架，jQuery、YUI 这类更偏库。这份盘点分两段：jQuery 时代常见的十个框架，和 2021 年还在流行的 Vue 系 UI 组件库。

jQuery 时代的常见框架

• Flex：Adobe 捐给 Apache 基金会后的第一个版本 Flex4.8 刚发布，还在孵化阶段，未来由社区驱动；
• ExtJS：与后台技术无关的前端 Ajax 框架，表格控件至今难逢对手，但商用收费；
• easyUI：基于 jQuery 的轻量 UI 框架，小而功能全，开源免费；麻烦是 1.2 之后源码混淆，出问题难改；
• MiniUI：jQuery 系的快速 WebUI 方案，Ajax 无刷新、CRUD、树形表格这些典型 B/S 界面都能快速搭，收费且不开源；
• jQueryUI：jQuery 官方 UI 插件集，Tabs、拖放、日期选择、对话框等模块可整体用也可拆开用，免费开源；
• DWZ：国产的 jQuery RIA 框架，目标是快速开发、降低 Ajax 成本，源码开放；
• GWT：Google 的 Java 开发包，API 设计参考 AWT，会 Java 就能写前端并做单元测试；
• YUI：雅虎开源的 JavaScript 库（BSD 许可），反倒是它的压缩工具 YUI Compressor 更出名；
• Sencha：ExtJS、jQTouch、Raphael 三个项目合并而来，大厂血统；
• Dojo：开源 DHTML 工具包，IBM、SUN 等基金会背书，国内用得不多。

2021 年流行的 UI 组件库

下面按流行度星级排（★ 越多用的人越多）：

• layui（★★★★★★★）：按自有模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 组织方式，门槛低、拿来即用，适合快速出界面。官网 https://www.layui.com，仓库 https://github.com/sentsin/layui/；
• iView（★★★★★★）：基于 Vue 的 UI 库，很多基础组件比 Element 更丰富，主要服务 PC 中后台产品。官网 https://www.iviewui.com，小程序版仓库 https://github.com/TalkingData/iview-weapp；
• Element（★★★★★★★★）：饿了么前端开源的 Vue UI 组件库，组件几乎覆盖后台所需，文档细、示例多，PC 端质量很高。官网 http://element-cn.eleme.io/#/zh-CN，起步仓库 https://github.com/ElementUI/element-starter；
• vant（★★★★★★★★★★★）：有赞前端团队的 Vue 组件库，一套 UI 基础组件加业务组件，移动端风格统一、效率高。官网 https://youzan.github.io/vant/#/zh-CN/intro，仓库 https://github.com/youzan/vant；
• Mint UI（★★★★）：饿了么团队的移动端 Vue 框架，CSS 和 JS 组件够用。官网 https://mint-ui.github.io/#!/zh-cn，仓库 https://github.com/ElemeFE/mint-ui/；
• WeUI（★★★）：微信官方设计团队做的样式库，和微信原生视觉一致，内网页和小程序都用它，含 button、cell、dialog、toast 等。官网 https://weui.io/；
• cube-ui（★★★★★）：滴滴团队的 Vue 移动端组件库，支持按需引入和后编译，可基于现有组件二次开发。官网 https://didi.github.io/cube-ui/#/zh-CN。

选型注意

这份盘点的时效是 2021 年，React 系和 Vue3 生态的新库没在里面。挑框架先查仓库最近提交和 issue 响应，商业框架一定先确认授权条款；老框架（ExtJS、easyUI、MiniUI）的坑集中在闭源或源码混淆上，出问题只能等官方。前端涉及语言、框架、构建工具和历史版本迭代，东西很多，任重道远。