02 常用前端库概览

本文根据一些资料和日常开发，整理了 GitHub上一些优秀的前端库，包括常用工具、图片处理、文件处理、编辑器、数据可视化、React 相关、Vue 相关等库。

JavaScript

常用工具类

lodash：是一个一致性、模块化、高性能的 JavaScript 实用工具库，通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单；
ramda：专门为函数式编程风格而设计，特性如下：
- Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念；
- Ramda 函数本身都是自动柯里化的；
- Ramda 函数参数的排列顺序更便于柯里化；
moment：一个JavaScript 日期处理类库；
day.js： day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，是 moment.js 的 2kB 轻量化方案；
bignumber.js：一个用于任意精度十进制和非十进制算术的 JavaScript 库；
decimal.js：一个用于任意精度十进制类型计算的 JavaScript 库；
big.js：一个用于任意精度十进制算术的小型快速 JavaScript 库（big.js、bignumber.js 和 decimal.js 有什么区别？）；
qs：一个查询字符串解析和字符串化库，增加了一些安全性；
query-string：一个解析和字符串化 URL查询字符串的库；

常用框架

Axios：一个基于 Promise 的 HTTP 库，可用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+；
mockjs：一个生成随机数据和拦截 Ajax 请求的生成器，帮助前端开发和原型与后端进度分离，减少一些单调，特别是在编写自动化测试时；
Superagent：一个小型渐进式客户端 HTTP 请求库，与具有相同 API 的 Node.js 模块，支持许多高级 HTTP 客户端功能；
flyio：一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库，目前支持：Node.js 、微信小程序、Weex 、React Native 、Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。
swiper：一个强大的 js 跨端触摸滑动库；
fullPage.js：一个简单易用的库，可创建全屏滚动网站（也称为单页网站或单页网站）并在网站的各个部分中添加横向滑块；
better-scroll：一个移动端使用的滚动插件；
fastclick：一个简单易用的 JavaScript 库，用于消除 click 移动端浏览器上物理点击和触发事件之间的 300 毫秒延迟。
vconsole：一个用于移动端网页的轻量级、可扩展的前端开发调试工具，可以在 Vue、React、微信小程序及任何其他框架应用程序中使用它。
JQuery： jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中使用；
zepto： Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有很大程度上与 jQuery 兼容的 API，是JQuery 的轻量级版本, 适合移动端；

表单校验类

Validator.js：一个基于 Laravel 5.2 验证的客户端 JavaScript 校验库；
validator.js：一个校验和处理字符串的强大的 Javascript 库，仅用于字符串；
validate.js：一个提供跨框架和跨语言的数据验证方式的 Javascript 库；
id-validator：一个用于验证个人身份证号码（中国）的 Javascript 库；

图形图像处理

html2canvas：一个强大的使用 Js 开发的浏览器网页截图工具，通过读取 DOM 和应用于元素的不同样式将当前页面呈现为 canvas 图像。
注意： 该包仍处于实验性的状态，因此不建议在生产环境中使用它，也不要用它构建应用程序，因为后面可能进行重大更改。
dom-to-image：一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库；
pica：一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库；
Lena.js：一个轻量级的可以给你图像加各种滤镜的 js 库；
Compressor.js：一个使用本地 canvas.toBlob API 进行图像有损压缩的 js 库，在不同的浏览器有不同的压缩效果。
Fabric.js：一个强大的 Javascript 库，它让使用 HTML5 画布变得轻而易举；
merge-images：一个可以组合多张图片的 Javascript 库；
cropperjs：一款强大的图片裁切库, 支持灵活的图片裁切方式；
grade-js：一个基于图像中的前 2 种主要颜色生成互补渐变背景的库；

文件处理

file-saver：一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用程序；
js-xlsx：一个强大的解析和编写 excel 文件的库；
jspdf：一个基于 Javascript 生成 PDF 的库；
pdfjs：一个面向服务器端和客户端的可移植文档格式 (PDF) 生成库；
pdfh5.js：一个基于 pdf.j s和 jQuery 的 web|h5|移动端的支持手势缩放的 PDF 预览库。
x-spreadsheet：一个基于 JavaScript 快速构建 Web Excel 的库；
file-viewer：一个使用 Svelte 构建的用于预览文件的自定义组件（Web 组件），可以在任何地方使用，无论框架如何，技持文件格式：.ppt, .pptx, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .jpeg, .gif，类似的有 react-file-viewer ；
html2md：一个用于转换 HTML 为 Markdown 的工具；
marked：一个用于解析 Markdown 的低级编译器；
markdown-it：一个快速且易于扩展的 Markdown 解析器；
handsontable，一个结合了数据网格特性的 JavaScript组件，类似于 Excel 编辑表格。

动画库

threejs：一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形库；
animejs：一个轻量级的 JavaScript 动画库，具有简单但功能强大的 API，适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
velocity-animate：一个动画引擎，其 API 与 jQuery 的 $.animate() 相同。它可以使用和不使用 jQuery。它的速度非常快，并且具有彩色动画、变换、循环、缓动、SVG 支持和滚动。它是 jQuery 和 CSS 过渡组合中最好的。
Vivus：一个零依赖的 JavaScript 动画库，可以让 SVG 具有被绘制的效果；
gsap：一个 JavaScript 动画库，用于创建高性能、零依赖、跨浏览器动画，已在超过 400 万个网站上使用，并且可以在 React、Vue、Angular 项目中使用；
scrollreveal：一个 JavaScript 库，用于在元素进入/离开视口时轻松设置动画；
Kute.js：一个基于 ES6+ 标准的现代 JavaScript 动画引擎，具有强大的 TypeScript 定义和最重要的 Web 功能，以及易于使用的方法来设置高性能、跨浏览器动画；
Typed.js：一个轻松实现打字效果的 JavaScript 库；
mixitup：一个用于动画 DOM 操作的高性能、无依赖库，使您能够过滤、排序、添加和删除带有漂亮动画的 DOM 元素；
lottie-web：一个用于 Android，iOS，Web 和 Windows 的库，用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，并在移动设备和网络上呈现它们；

鼠标/键盘相关

Hotkeys：一个强大的 Javascript 库，用于捕获键盘输入和输入的组合键，无需其他依赖关系；
sortablejs：一个用于可重新排序的拖放列表的 JavaScript 库；

其他

uuid：一个用于创建 RFC4122 uuid 的库；
md5：一个用于生成 MD5 散列消息的 JavaScript 函数；
crypto-js：一个用于加密的 JavaScript 库；
javascript-obfuscator：一款功能强大的免费 JavaScript 混淆器，包含多种功能，可为您的源代码提供保护；
nodemailer：一个用 Node.js 发送电子邮件的库；
clipboard.js：一个 JS 实现的剪贴板功能，没有 flash，压缩后只有 3kb；
qrcode：一个二维码/二维条码生成器；
nprogress：一个顶部进度条组件；
emoji-mart：一个基于 React 的表情库，类似的还有 emoji-mart-vue、V-Emoji-Picker、@kevinfaguiar/vue-twemoji-picker；
watermarkjs：一个用于在浏览器中为图像加水印的功能库，用 ES6 编写，并通过Babel提供给当前浏览器，支持 url、文件输入、blob 和页面图像；
jsdoc：一个 JavaScript 的 API 文档生成器；
array-to-tree：一个将普通的节点数组（带有指向父节点的指针）转换为嵌套 JSON 数据结构的转换器；
hammerjs：一个可以识别触摸、鼠标和点击事件等手势的开放源码类库，没有任何依赖项并且只有 7.34 kB 缩小 + gzip压缩!；

CSS

reset.css：一个重置样式表的 CSS 文件，减少浏览器在默认行高、页边距和标题字体大小等方面的不一致，查看CSS 工具：重置 CSS。
normalize.css：一个很小的 CSS 文件，为 HTML 元素样式上提供了跨浏览器的高度一致性，相比于传统的 reset.css，Normalize.css 是一种现代的、为HTML5准备的优质替代方案，查看来，让我们谈一谈 Normalize.css。
hover.css：一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等；
animate.css：一个现成的跨浏览器动画库；
magic.css：一个具有特殊效果的 CSS3 动画；
kite：一个灵活的布局助手 CSS 库，使用 inline-block，而不是最新的 CSS 语法，适用于大多数浏览器，包括 IE8、Android2.3.x；
csshake：一个使用 CSS3 实现的动画样式，实现多种不同样式的抖动效果；
hint.css：一个用纯 css 和 html 实现的提示库；

React

Create React App：一个React 官方维护的创建 React 单页面应用的工具；
React Native：一个基于 React 的移动端跨平台 UI；
Ant design：一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品；
Ant design mobile：一个基于 Ant Design 设计体系的 React UI 移动端组件库；
MaterialUI：世界最受欢迎的基于质感设计的 React UI 库
Fluent UI React：一组微软开源的 UX 框架的集合，用于创建共享代码，设计和交互行为的精美的跨平台应用程序；
React desktop：一个基于Facebook 的 React库构建的 JavaScript 库，旨在为网络带来原生桌面体验，包含许多 macOS Sierra 和 Windows 10 组件。 react-desktop与NW.js和Electron.js完美配合，但可以在任何 JavaScript 驱动的项目中使用！
zent：是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。
react-virtualized：一组用于高效渲染大型列表和表格数据的 React 组件；
react-beautiful-dnd：一个漂亮且易于访问的列表拖放 React 组件；
react-dnd：一组 React 实用程序，可帮助您构建复杂的拖放界面，同时保持组件解耦；
react-moveable：一个 React 组件，它创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可收缩、可分组、可捕捉；
react-grid-layout：一个基于 React 的，类似于 Packery 或 Gridster 的网格布局系统，具有响应性并支持断点；
Halogen：一个 React 的加载动画的集合；
react-loading：一款基于 react 的轻量级加载动画库，支持按需导入，开箱即用；
react-move：一个漂亮的，基于数据驱动的 React 动画库；
react-spring：一个基于 spring-physics 的动画库；
react-text-loop-next：一个文字轮播动画库；
react-image-crop：一个基于 React 的无依赖图像裁剪工具；
react-sparklines：一个基于数据自动生成趋势线的 React 组件；
joL-player：一个简单、美观、功能强大的 React 播放器；

Vue

Vue CLI：一个基于 Vue.js 进行快速开发的完整系统；
awesome-vue：一个集合了大量由社区贡献的插件和库列表；
element-ui：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库；
mint-ui：一个基于 Vue.js 的移动端组件库；
Vant：一个轻量、可靠的移动端 Vue 组件库；
weex：一个可以使用现代化的 Web 技术开发高性能原生应用的框架；
nuxtjs：一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染（SSR）应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性；
ant design vue：是 ant design 的 Vue 实现，开发和服务于企业级后台产品；
vue-native-core：一个使用 JavaScript 构建跨平台原生移动应用程序的框架；
vue-element-admin：一个基于 vue 和 element-ui 实现的后台前端解决方案；
VuePress：一个基于 Vue 的静态站点生成器，最初是用来编写技术文档的工具，现在则发展成为一个小巧、紧凑、功能强大的无头 CMS；
vue-fullscreen：一个简单的全屏 Vue.js 组件，基于screenfull.js；
async-validator：一个异步的表单校验器；

富文本/JSON/可视化编辑器

codemirror：是一个用 JavaScript 为浏览器实现的通用文本编辑器，专用于编辑代码，并带有 100 多种语言模式和实现更高级编辑功能的各种插件，每种语言都带有功能齐全的代码和语法突出显示，以帮助阅读和编辑复杂的代码，查看CodeMirror中文说明文档；
jsoneditor：一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON，具有树编辑器、代码编辑器和纯文本编辑器等多种模式；
tinymce：一个轻量级的基于浏览器的所见即所得的富文本编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持；
wangeditor：一个轻量级 Web 富文本编辑器，配置方便，使用简单；
braft-editor：一个基于draft-js 的 Web 富文本编辑器，适用于 React 框架，兼容现代主流浏览器；
h5-dooring：一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主，后台采用nodejs开发。
dooringx：一款所见所得的低代码可视化编辑器；
dooringx-lib：一款可视化搭建框架；

地图

google-maps：一个谷歌地图 api 的异步加载器；
amap-jsapi-loader：一个高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法；
react-baidu-map：一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中；
vue-baidu-map：一个基于 Vue 封装的百度地图组件；
polymaps：一个免费的 JavaScript 库，用于在现代 Web 浏览器中制作动态、交互式地图；

数据可视化

antv：蚂蚁集团全新一代数据可视化解决方案，包含 G2（可视化图形语法）、S2（多维可视分析表格）、G6（关系数据可视化引擎与图分析）、X6（数据驱动的图编辑引擎）、L7（地理空间数据可视化框架）、F2（专注于移动端的可视化）、**AVA（可视分析）**及一套完整的图表使用和设计规范, 提供强大的数据可视化需求；
d3js：一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据，遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作；
Apache ECharts：一个免费的、强大的图表和可视化库，提供了一种简单的方法来向您的商业产品添加直观、交互式和高度可定制的图表，是用纯 JavaScript 编写的，基于zrender，这是一个全新的轻量级画布库；
bizcharts：一个阿里通用图表组件库，致力于打造企业中后台高效、专业、便捷的数据可视化解决方案，基于 G2 与G2Plot 封装的 React 图表库，已经历阿里复杂业务场景长达三年的洗礼，在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现；
recharts：一个用 React 和 D3 构建的可组合图表库；
Viser：支持多种主流框架的可视化库；
plotly.js：一个独立的 Javascript 数据可视化库，还支持plotly在各自的生态系统中命名的 Python 和 R 模块（称为 Plotly.py 和 Plotly.R），用于生成数十种图表类型和可视化，包括统计图表、3D 图表、科学图表、SVG 和平铺地图、财务图表等；
pivottable：一个 Javascript 数据透视表库，具有构建在 jQuery/jQueryUI 之上的拖放功能，最初由 Nicolas Kruchten 用 CoffeeScript 编写。

其他

lucky-canvas：一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件；

参考资料

总结100+前端优质库,让你成为前端百事通

GitHub 上100个优质前端项目整理，非常全面！

上一页01 前端知识概览下一页基础 00 前端常见问题01

最后更新于1年前

这有帮助吗？

02 常用前端库概览

JavaScript

常用工具类

lodash：是一个一致性、模块化、高性能的 JavaScript 实用工具库，通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单；
ramda：专门为函数式编程风格而设计，特性如下：
- Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念；
- Ramda 函数本身都是自动柯里化的；
- Ramda 函数参数的排列顺序更便于柯里化；
moment：一个JavaScript 日期处理类库；
day.js： day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，是 moment.js 的 2kB 轻量化方案；
bignumber.js：一个用于任意精度十进制和非十进制算术的 JavaScript 库；
decimal.js：一个用于任意精度十进制类型计算的 JavaScript 库；
big.js：一个用于任意精度十进制算术的小型快速 JavaScript 库（big.js、bignumber.js 和 decimal.js 有什么区别？）；
qs：一个查询字符串解析和字符串化库，增加了一些安全性；
query-string：一个解析和字符串化 URL查询字符串的库；

常用框架

Axios：一个基于 Promise 的 HTTP 库，可用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+；
mockjs：一个生成随机数据和拦截 Ajax 请求的生成器，帮助前端开发和原型与后端进度分离，减少一些单调，特别是在编写自动化测试时；
Superagent：一个小型渐进式客户端 HTTP 请求库，与具有相同 API 的 Node.js 模块，支持许多高级 HTTP 客户端功能；
flyio：一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库，目前支持：Node.js 、微信小程序、Weex 、React Native 、Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。
swiper：一个强大的 js 跨端触摸滑动库；
fullPage.js：一个简单易用的库，可创建全屏滚动网站（也称为单页网站或单页网站）并在网站的各个部分中添加横向滑块；
better-scroll：一个移动端使用的滚动插件；
fastclick：一个简单易用的 JavaScript 库，用于消除 click 移动端浏览器上物理点击和触发事件之间的 300 毫秒延迟。
vconsole：一个用于移动端网页的轻量级、可扩展的前端开发调试工具，可以在 Vue、React、微信小程序及任何其他框架应用程序中使用它。
JQuery： jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中使用；
zepto： Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有很大程度上与 jQuery 兼容的 API，是JQuery 的轻量级版本, 适合移动端；

表单校验类

Validator.js：一个基于 Laravel 5.2 验证的客户端 JavaScript 校验库；
validator.js：一个校验和处理字符串的强大的 Javascript 库，仅用于字符串；
validate.js：一个提供跨框架和跨语言的数据验证方式的 Javascript 库；
id-validator：一个用于验证个人身份证号码（中国）的 Javascript 库；

图形图像处理

html2canvas：一个强大的使用 Js 开发的浏览器网页截图工具，通过读取 DOM 和应用于元素的不同样式将当前页面呈现为 canvas 图像。
注意： 该包仍处于实验性的状态，因此不建议在生产环境中使用它，也不要用它构建应用程序，因为后面可能进行重大更改。
dom-to-image：一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库；
pica：一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库；
Lena.js：一个轻量级的可以给你图像加各种滤镜的 js 库；
Compressor.js：一个使用本地 canvas.toBlob API 进行图像有损压缩的 js 库，在不同的浏览器有不同的压缩效果。
Fabric.js：一个强大的 Javascript 库，它让使用 HTML5 画布变得轻而易举；
merge-images：一个可以组合多张图片的 Javascript 库；
cropperjs：一款强大的图片裁切库, 支持灵活的图片裁切方式；
grade-js：一个基于图像中的前 2 种主要颜色生成互补渐变背景的库；

文件处理

file-saver：一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用程序；
js-xlsx：一个强大的解析和编写 excel 文件的库；
jspdf：一个基于 Javascript 生成 PDF 的库；
pdfjs：一个面向服务器端和客户端的可移植文档格式 (PDF) 生成库；
pdfh5.js：一个基于 pdf.j s和 jQuery 的 web|h5|移动端的支持手势缩放的 PDF 预览库。
x-spreadsheet：一个基于 JavaScript 快速构建 Web Excel 的库；
file-viewer：一个使用 Svelte 构建的用于预览文件的自定义组件（Web 组件），可以在任何地方使用，无论框架如何，技持文件格式：.ppt, .pptx, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .jpeg, .gif，类似的有 react-file-viewer ；
html2md：一个用于转换 HTML 为 Markdown 的工具；
marked：一个用于解析 Markdown 的低级编译器；
markdown-it：一个快速且易于扩展的 Markdown 解析器；
handsontable，一个结合了数据网格特性的 JavaScript组件，类似于 Excel 编辑表格。

动画库

threejs：一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形库；
animejs：一个轻量级的 JavaScript 动画库，具有简单但功能强大的 API，适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
velocity-animate：一个动画引擎，其 API 与 jQuery 的 $.animate() 相同。它可以使用和不使用 jQuery。它的速度非常快，并且具有彩色动画、变换、循环、缓动、SVG 支持和滚动。它是 jQuery 和 CSS 过渡组合中最好的。
Vivus：一个零依赖的 JavaScript 动画库，可以让 SVG 具有被绘制的效果；
gsap：一个 JavaScript 动画库，用于创建高性能、零依赖、跨浏览器动画，已在超过 400 万个网站上使用，并且可以在 React、Vue、Angular 项目中使用；
scrollreveal：一个 JavaScript 库，用于在元素进入/离开视口时轻松设置动画；
Kute.js：一个基于 ES6+ 标准的现代 JavaScript 动画引擎，具有强大的 TypeScript 定义和最重要的 Web 功能，以及易于使用的方法来设置高性能、跨浏览器动画；
Typed.js：一个轻松实现打字效果的 JavaScript 库；
mixitup：一个用于动画 DOM 操作的高性能、无依赖库，使您能够过滤、排序、添加和删除带有漂亮动画的 DOM 元素；
lottie-web：一个用于 Android，iOS，Web 和 Windows 的库，用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，并在移动设备和网络上呈现它们；

鼠标/键盘相关

Hotkeys：一个强大的 Javascript 库，用于捕获键盘输入和输入的组合键，无需其他依赖关系；
sortablejs：一个用于可重新排序的拖放列表的 JavaScript 库；

其他

uuid：一个用于创建 RFC4122 uuid 的库；
md5：一个用于生成 MD5 散列消息的 JavaScript 函数；
crypto-js：一个用于加密的 JavaScript 库；
javascript-obfuscator：一款功能强大的免费 JavaScript 混淆器，包含多种功能，可为您的源代码提供保护；
nodemailer：一个用 Node.js 发送电子邮件的库；
clipboard.js：一个 JS 实现的剪贴板功能，没有 flash，压缩后只有 3kb；
qrcode：一个二维码/二维条码生成器；
nprogress：一个顶部进度条组件；
emoji-mart：一个基于 React 的表情库，类似的还有 emoji-mart-vue、V-Emoji-Picker、@kevinfaguiar/vue-twemoji-picker；
watermarkjs：一个用于在浏览器中为图像加水印的功能库，用 ES6 编写，并通过Babel提供给当前浏览器，支持 url、文件输入、blob 和页面图像；
jsdoc：一个 JavaScript 的 API 文档生成器；
array-to-tree：一个将普通的节点数组（带有指向父节点的指针）转换为嵌套 JSON 数据结构的转换器；
hammerjs：一个可以识别触摸、鼠标和点击事件等手势的开放源码类库，没有任何依赖项并且只有 7.34 kB 缩小 + gzip压缩!；

CSS

reset.css：一个重置样式表的 CSS 文件，减少浏览器在默认行高、页边距和标题字体大小等方面的不一致，查看CSS 工具：重置 CSS。
normalize.css：一个很小的 CSS 文件，为 HTML 元素样式上提供了跨浏览器的高度一致性，相比于传统的 reset.css，Normalize.css 是一种现代的、为HTML5准备的优质替代方案，查看来，让我们谈一谈 Normalize.css。
hover.css：一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等；
animate.css：一个现成的跨浏览器动画库；
magic.css：一个具有特殊效果的 CSS3 动画；
kite：一个灵活的布局助手 CSS 库，使用 inline-block，而不是最新的 CSS 语法，适用于大多数浏览器，包括 IE8、Android2.3.x；
csshake：一个使用 CSS3 实现的动画样式，实现多种不同样式的抖动效果；
hint.css：一个用纯 css 和 html 实现的提示库；

React

Create React App：一个React 官方维护的创建 React 单页面应用的工具；
React Native：一个基于 React 的移动端跨平台 UI；
Ant design：一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品；
Ant design mobile：一个基于 Ant Design 设计体系的 React UI 移动端组件库；
MaterialUI：世界最受欢迎的基于质感设计的 React UI 库
Fluent UI React：一组微软开源的 UX 框架的集合，用于创建共享代码，设计和交互行为的精美的跨平台应用程序；
React desktop：一个基于Facebook 的 React库构建的 JavaScript 库，旨在为网络带来原生桌面体验，包含许多 macOS Sierra 和 Windows 10 组件。 react-desktop与NW.js和Electron.js完美配合，但可以在任何 JavaScript 驱动的项目中使用！
zent：是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。
react-virtualized：一组用于高效渲染大型列表和表格数据的 React 组件；
react-beautiful-dnd：一个漂亮且易于访问的列表拖放 React 组件；
react-dnd：一组 React 实用程序，可帮助您构建复杂的拖放界面，同时保持组件解耦；
react-moveable：一个 React 组件，它创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可收缩、可分组、可捕捉；
react-grid-layout：一个基于 React 的，类似于 Packery 或 Gridster 的网格布局系统，具有响应性并支持断点；
Halogen：一个 React 的加载动画的集合；
react-loading：一款基于 react 的轻量级加载动画库，支持按需导入，开箱即用；
react-move：一个漂亮的，基于数据驱动的 React 动画库；
react-spring：一个基于 spring-physics 的动画库；
react-text-loop-next：一个文字轮播动画库；
react-image-crop：一个基于 React 的无依赖图像裁剪工具；
react-sparklines：一个基于数据自动生成趋势线的 React 组件；
joL-player：一个简单、美观、功能强大的 React 播放器；

Vue

Vue CLI：一个基于 Vue.js 进行快速开发的完整系统；
awesome-vue：一个集合了大量由社区贡献的插件和库列表；
element-ui：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库；
mint-ui：一个基于 Vue.js 的移动端组件库；
Vant：一个轻量、可靠的移动端 Vue 组件库；
weex：一个可以使用现代化的 Web 技术开发高性能原生应用的框架；
nuxtjs：一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染（SSR）应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性；
ant design vue：是 ant design 的 Vue 实现，开发和服务于企业级后台产品；
vue-native-core：一个使用 JavaScript 构建跨平台原生移动应用程序的框架；
vue-element-admin：一个基于 vue 和 element-ui 实现的后台前端解决方案；
VuePress：一个基于 Vue 的静态站点生成器，最初是用来编写技术文档的工具，现在则发展成为一个小巧、紧凑、功能强大的无头 CMS；
vue-fullscreen：一个简单的全屏 Vue.js 组件，基于screenfull.js；
async-validator：一个异步的表单校验器；

富文本/JSON/可视化编辑器

codemirror：是一个用 JavaScript 为浏览器实现的通用文本编辑器，专用于编辑代码，并带有 100 多种语言模式和实现更高级编辑功能的各种插件，每种语言都带有功能齐全的代码和语法突出显示，以帮助阅读和编辑复杂的代码，查看CodeMirror中文说明文档；
jsoneditor：一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON，具有树编辑器、代码编辑器和纯文本编辑器等多种模式；
tinymce：一个轻量级的基于浏览器的所见即所得的富文本编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持；
wangeditor：一个轻量级 Web 富文本编辑器，配置方便，使用简单；
braft-editor：一个基于draft-js 的 Web 富文本编辑器，适用于 React 框架，兼容现代主流浏览器；
h5-dooring：一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主，后台采用nodejs开发。
dooringx：一款所见所得的低代码可视化编辑器；
dooringx-lib：一款可视化搭建框架；

地图

google-maps：一个谷歌地图 api 的异步加载器；
amap-jsapi-loader：一个高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法；
react-baidu-map：一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中；
vue-baidu-map：一个基于 Vue 封装的百度地图组件；
polymaps：一个免费的 JavaScript 库，用于在现代 Web 浏览器中制作动态、交互式地图；

数据可视化

antv：蚂蚁集团全新一代数据可视化解决方案，包含 G2（可视化图形语法）、S2（多维可视分析表格）、G6（关系数据可视化引擎与图分析）、X6（数据驱动的图编辑引擎）、L7（地理空间数据可视化框架）、F2（专注于移动端的可视化）、**AVA（可视分析）**及一套完整的图表使用和设计规范, 提供强大的数据可视化需求；
d3js：一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据，遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作；
Apache ECharts：一个免费的、强大的图表和可视化库，提供了一种简单的方法来向您的商业产品添加直观、交互式和高度可定制的图表，是用纯 JavaScript 编写的，基于zrender，这是一个全新的轻量级画布库；
bizcharts：一个阿里通用图表组件库，致力于打造企业中后台高效、专业、便捷的数据可视化解决方案，基于 G2 与G2Plot 封装的 React 图表库，已经历阿里复杂业务场景长达三年的洗礼，在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现；
recharts：一个用 React 和 D3 构建的可组合图表库；
Viser：支持多种主流框架的可视化库；
plotly.js：一个独立的 Javascript 数据可视化库，还支持plotly在各自的生态系统中命名的 Python 和 R 模块（称为 Plotly.py 和 Plotly.R），用于生成数十种图表类型和可视化，包括统计图表、3D 图表、科学图表、SVG 和平铺地图、财务图表等；
pivottable：一个 Javascript 数据透视表库，具有构建在 jQuery/jQueryUI 之上的拖放功能，最初由 Nicolas Kruchten 用 CoffeeScript 编写。

其他

lucky-canvas：一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件；

参考资料

总结100+前端优质库,让你成为前端百事通

GitHub 上100个优质前端项目整理，非常全面！

上一页01 前端知识概览下一页基础 00 前端常见问题01

最后更新于1年前

这有帮助吗？