这些前端必备的硬核插件库，你都get了吗？

小编精心整理了一些前端常用的插件。

通过这篇文章你可以了解到很多前端常用的硬核开源插件，强烈建议收藏。

vue UI库

element-ui

官网地址：https://element.eleme.cn/#/zh-CN

Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。更新频率还是很高的,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。

Avue

官网地址：https://avuejs.com/

Avue是基于element二次封装的ui库，适用于后台管理系统，将常用表格表单封装进了组件，使用时只需要配置json既可实现表单表格对应功能。

缺点是生态不好，出错网上没有解决方案，对于定制化要求比较高的需求，使用avue不是很方便。

iView

官网地址：https://www.iviewui.com/

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

Vux

官网地址：https://vux.li/

Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是：Vue移动端UI组件库，二是：WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle。Vux是个人维护的。但是GitHub上star还是很高的，达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。在微信页面开发中，基本没有太多的bug，开发还是比较顺手的。

Mint UI

官网地址：http://mint-ui.github.io/#!/zh-cn

Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的，开发移动端web项目还是很方便，文档也很简介明了。很多页面Mint UI组件都已经封装好，基本可以照着例子写，简单的调整一下就可以实现。不过，在GitHub上看最后一次代码提交在2018年1月16日。不知道是项目比较稳定没有更新，还是项目有被废弃的可能。

Ant Design Vue

官网地址：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

nt Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue组件。不过相比较而言，Ant Design Vue更胜一筹。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。

Vant

官网地址：https://youzan.github.io/vant/#/zh-CN/intro

ant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。截止到目前，Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如：、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的，不太在意界面，实现业务逻辑的话，用Vant组件库开发还是很快的。

react UI库

Ant-design

官网地址：https://ant.design/docs/react/introduce-cn

Ant Design一套企业级 UI 设计语言和 React 组件库，基于Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品，风格素雅简洁，喜欢的可以选择使用，目前在react技术栈领域使用的较为广泛，各种文档也比较齐全，遇到问题好解决。

Material-UI

官网地址：https://material-ui.com

Material-UI当下流行的 React UI 框架，组件用于更快速、更简便的 web 开发，适合小团队，或者个人项目快速搭建前端界面，可以自定义主题，Github上面的star挺多的，有超过Ant的趋势，有空的话可以读一读源码，毕竟这么优秀的框架，能学到很多东西。

React-Bootstrap

官网地址：http://react.tgwoo.com

一款基于ReactJS对Bootstrap进行封装前端组件库，React-Bootstrap是可重用的前端组件库。样式组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受，但通过 Facebook 的 React.js 框架获得更清爽的代码。

人脸识别

tracking.js

官网地址：https://trackingjs.com/

Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。

AR/VR

AR.js

官网地址：https://www.oschina.net/p/ar-js

AR.js 是一款应用于 Web 的高效增强现实（AR）库，基于 three.js + jsartoolkit5，无需安装。它适用于任何带有 webgl 和 webrtc 的手机，且运行速度非常快，在手机上也能高效运行，包括 Android、IOS 和 Windows phone 。

Threejs

官网地址：http://www.webgl3d.cn/

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

A-Frame

官网地址：https://aframe.io/

A-Frame 是 Mozilla 开源的网页虚拟现实体验（ WebVR ）框架，旨在让创建 WebVR 体验变得更简单。它可在移动、桌面、Vive 和 Rift 在内的平台上运行，跨平台处理 3D 和 WebVR 模板。

A-Frame 被设计成 Web 开发者很熟悉的模样，HTML 代码易于阅读和复制粘贴。

React VR

官网地址：http://www.vr-react.com/

React VR 是 Facebook 开源的一款用于构建在 Web 浏览器中运行的 VR 应用的框架，使用与 React 相同的设计，让您通过声明式的组件构建丰富的 VR 世界和 UI。它将现代 API（例如 WebGL 和 WebVR）与 React 的声明能力结合起来，通过各种设备提供适用于消费者的体验。

IdeaSpace

官网地址：https://www.ideaspace.cam.ac.uk/

IdeaSpace 是一款用于虚拟现实网页的 CMS 内容管理系统。可以像管理博客一样管理你的虚拟现实空间和资源。IdeaSpace 使用前面提到的 A-Frame 来实现主题和空间，提供强大的遵循 Web 标准的标识语言。可通过 Oculus Rift 或者 Google Cardboard 在浏览器上方便体验虚拟现实空间，无需安装插件和应用。

数据可视化

AnyChart

官网地址：http://www.anychart.com/

AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。

amCharts

官网地址：https://www.amcharts.com/

amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库，在应用中不依赖任何其他第三方类库，就可直接编译运行。除了提供最基本的规范要素外，amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时，用鼠标 hover 图表内容，可以与其进行交互，使图表展示细节信息，其中呈现信息的容器被叫做 Balloon（气球）。除此之外图表可以动态动画的形式被绘制出来，带来了了非常好的展示效果。

Cesium

官网地址：https://cesium.com/cesiumjs/

Cesium 同样专注于地理数据可视化，它是一个 Javascript 库，可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外，它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议，支持商业及非商业项目。

Chart.js

官网地址：http://chartjs.cn/

Chart.js 是一个简单、面向对象，为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5，响应式，支持所有现代浏览器。同时它不依赖任何外部工具库，本身轻量级，且支持模块化，即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。

Chartist.js

官网地址：http://gionkunz.github.io/chartist-js/

Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具，它支持 SVG 格式，图表数据转换灵活，同时也支持多种图表展现形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分离，因此代码比较简洁，在应用时配置流程十分简单。它生成的是响应式图表，可以自动支持不同的浏览器尺寸和分辨率，更多的是，它也支持自定义 SASS 架构。

D3

官网地址：https://d3js.org/

2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3，它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式，例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置单独的对象以及功能集，并通过标准 API 进行 DOM 调用。

echarts

官网地址：https://echarts.apache.org/zh/index.html

一款免费开源的数据可视化产品，给用户提供直观、生动、可交互和可个性化定制的数据可视化图表。Echarts 上手简单。其具有的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，帮助用户在对数据挖掘、整合时大幅提高效率。同时，Echarts 提供了丰富的图表类型，除了常见的折柱饼，还支持地图、力导向图、treemap、热力图、树图等等。更惊艳的是，它还支持任意维度的堆积和多图表混合展 现。总而言之，这是一款让我们非常惊喜的可视化产品，非常强大，不过他图表不是很美观，对移动端的支持也还有些欠缺，不过这些问题在官方最新发布的 3.0beta中得到了很大改善

Flot

官网地址：http://www.flotcharts.org/

Flot 是一个纯 Javascript 绘图库，作为 jQuery 的插件使用。它可以较为轻松地跨浏览器工作，甚至包括 IE6。因为 jQuery 的特性，开发者可以全面地控制图表的动画、交互，把数据的呈现过程优化得更加完美。

HighCharts

官网地址：https://www.highcharts.com.cn/

HighCharts 是一个界面美观，时下非常流行的的纯 Javascript 图表库。它实际上由两部分组成：HighCharts 和 Highstock。其中 HighCharts 能够很便捷地在 Web 网站或是 Web 应用程序中添加可交互图表，并可免费用于个人学习、个人网站和其他非商业用途。目前 HighCharts 支持的图表类型有曲线图、区域图、柱状图、饼状图、散点图和一些综合图表。而 HighStock 可以为用户方便地建立股票或一般的时间轴图表。它提供先进的导航选项，预设的日期范围，日期选择器，滚动和平移等公盟。

富文本

百度UEditor

官网地址：http://ueditor.baidu.com/website/

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码...

bootstrap-wysiwyg

官网地址：http://www.bootcss.com/p/bootstrap-wysiwyg/

bootstrap-wysiwyg 为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器。这个jQuery Bootstrap小插件（5KB, < 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器，灵感来自于 CLEditor 和 bootstrap-wysihtml5.

下面是他的主要特色：

• 在Mac和Wndows平台上能够自动针对常用操作绑定标准热键 可以通过拖拽插入图片；支持图片上传（也可以获取移动设备上的照片）
• 语音识别输入（仅限Chrome浏览器） 允许自定义工具条；不生成额外标签；
• 支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性 没有强制规定的样式 - 一切都由你做主 依赖浏览器的标准特性，没有非标准代码；
• 工具条和键盘功能均可定制，并且能够执行任何浏览器支持的命令 不会自己创建一个单独的frame、备份文本区等 - 本编辑器尽量保持简单，并仅仅运行在一个DIV内 （可选）清除尾部空格；清除空的div和span
• 必须运行在现代浏览器上（在Chrome 26、Firefox 19、Safari 6上经过测试，用户报告称可以在IE10上工作） 支持移动设备浏览器（在iOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过）

JQUERY NOTEBOOK

官网地址：http://raphaelcruzeiro.github.io/jquery-notebook/

一个简单，干净，优雅的所见即所得的富文本编辑器.用鼠标选中文字可看到效果。

eWebEditor

官网地址：http://www.ewebeditor.net/

eWebEditor是一个基于浏览器的在线HTML编辑器，WEB开发人员可以用她把传统的多行文本输入框textarea替换为可视化的富文本输入框。eWebEditor主功能不需要在客户端安装任何的组件或控件，操作人员就可以以直觉、易用的界面创建和发布网页内容。您可以通过eWebEditor自带的可视配置工具，对eWebEditor进行完全的配置。eWebEditor是非常容易与您现有的系统集成，简单到您只需要一行代码就可以完成eWebEditor的调用。您可以把eWebEditor应用于各种基于网页的应用系统中，如内容管理系统、邮件系统、论坛系统、新闻发布系统，等与内容发布相关的所有应用系统。

KindEditor

官网地址：http://kindeditor.net/demo.php

KindEditor是基于浏览器的所见即所得(WYSWYG)HTML编辑器，主要应用于CMS、论坛、博客等WEB程序里。主要特点：

• 代码量少，功能比较多。
• 通过添加plugin的方法，可以自定义功能。
• 可以删除不需要的plugin，减少文件大小。
• 可以任意改变编辑器风格，和网站融为一体。
• 代码容易理解，是一个可维护、可控制的编辑器

WYMeditor

官网地址：http://www.wymeditor.org/

WYMeditor是一个所建即所得Jquery富文本编辑器。支持插件扩展功能，是jwysiwyg的前身，有点庞大，功能齐全。

HtmlBox

官网地址：http://remiya.com/cms/projects/jquery-plugins/htmlbox/

HtmlBox文本编辑器，提供一个textarea表单元素，即可实现一个功能强大的HTML文本编辑器，使用非常简单。HTMLBox跨浏览器、交互性非常好、开源的Jquery富文本编辑器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用浏览器下测试通过。此编辑器用户手册可以帮住你非常容易地把此编辑器整合到自己的Web系统中。

国产富文本编辑-wangEditor

官网地址：http://www.wangeditor.com/

wangEditor基于JavaScript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。与国产编辑器 百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。它还会根据使用者的反馈不断完善，未来将支持移动版。支持IE6+浏览器。

参考：

1、16款优秀的Vue UI组件库推荐 https://www.cnblogs.com/xiaoxiaoMrHuang/p/12321656.html

2、推荐 14 款基于 JavaScript 的数据可视化工具 https://www.oschina.net/news/69431/14-popular-data-visualization-tools

3、分享6款优秀的 AR/VR 开源库 https://www.cnblogs.com/zhangqie/p/8116313.htm

关注我

大家也可以关注我的公众号《脑洞前端》获取更多更新鲜的前端硬核文章，带你认识你不知道的前端。