這些前端必備的硬核插件庫，你都get了嗎？

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

通過這篇文章你可以了解到很多前端常用的硬核開源插件，強烈建議收藏。

vue UI庫

element-ui

官網(wǎng)地址：https://element.eleme.cn/#/zh-CN

Element 是由餓了么UED設計、餓了么大前端開發(fā)的一套基于 Vue 2.0 的桌面端組件庫。更新頻率還是很高的,組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細，例子也很豐富。

Avue

官網(wǎng)地址：https://avuejs.com/

Avue是基于element二次封裝的ui庫，適用于后臺管理系統(tǒng)，將常用表格表單封裝進了組件，使用時只需要配置json既可實現(xiàn)表單表格對應功能。

缺點是生態(tài)不好，出錯網(wǎng)上沒有解決方案，對于定制化要求比較高的需求，使用avue不是很方便。

iView

官網(wǎng)地址：https://www.iviewui.com/

iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產(chǎn)品。iView的組件還是比較齊全的，更新也很快，文檔寫得很詳細。有公司團隊維護，比較可靠的Vue UI組件框架。iView生態(tài)也做得很好，還有開源了一個iView Admin，做后臺非常方便。官網(wǎng)上介紹，iView已經(jīng)應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯(lián)想等大型公司的產(chǎn)品中。

Vux

官網(wǎng)地址：https://vux.li/

Vux是基于WeUI和Vue2.x開發(fā)的移動端UI組件庫，主要服務于微信頁面。Vux的定位已經(jīng)很明確了，一是：Vue移動端UI組件庫，二是：WeUI的基礎樣式庫。Vux的組件涵蓋了所有的WeUI的內(nèi)容，還擴展了一些常用的組件。比如：Sticky、timeline、v-chart、XCircle。Vux是個人維護的。但是GitHub上star還是很高的，達到13k。在GitHub上看到對issue的關閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網(wǎng)上也展示了很多Vux的使用案例。在微信頁面開發(fā)中，基本沒有太多的bug，開發(fā)還是比較順手的。

Mint UI

官網(wǎng)地址：http://mint-ui.github.io/#!/zh-cn

Mint UI基于 Vue.js 的移動端組件庫，同樣出自餓了么前端的項目。Mint UI是真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件。Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。網(wǎng)上的視頻教程很多都是基于Mint UI來講的，開發(fā)移動端web項目還是很方便，文檔也很簡介明了。很多頁面Mint UI組件都已經(jīng)封裝好，基本可以照著例子寫，簡單的調(diào)整一下就可以實現(xiàn)。不過，在GitHub上看最后一次代碼提交在2018年1月16日。不知道是項目比較穩(wěn)定沒有更新，還是項目有被廢棄的可能。

Ant Design Vue

官網(wǎng)地址：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

nt Design Vue是 Ant Design 3.X 的 Vue 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產(chǎn)品。在GitHub上可以找到幾個Ant Design的Vue組件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設計工具體系，實現(xiàn)了所有Ant Design of React的組件，支持現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。可以讓熟悉Ant Design的在使用Vue時，很容易的上手。

Vant

官網(wǎng)地址：https://youzan.github.io/vant/#/zh-CN/intro

ant是一個輕量、可靠的移動端 Vue 組件庫。Vant是有贊團隊開源的，主要維護也是有贊團隊。Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的 API 接口，助力開發(fā)者快速搭建小程序應用。截止到目前，Vant已經(jīng)開源了50+ 個經(jīng)過有贊線上業(yè)務檢驗的組件。比如：、AddressEdit 地址編輯、AddressList 地址列表、Area 省市區(qū)選擇、Card 卡片、Contact 聯(lián)系人、Coupon 優(yōu)惠券、GoodsAction 商品頁行動點、SubmitBar 提交訂單欄、Sku 商品規(guī)格彈層。如果做商城的，不太在意界面，實現(xiàn)業(yè)務邏輯的話，用Vant組件庫開發(fā)還是很快的。

react UI庫

Ant-design

官網(wǎng)地址：https://ant.design/docs/react/introduce-cn

Ant Design一套企業(yè)級 UI 設計語言和 React 組件庫，基于Ant Design 設計體系的 React UI 組件庫，用于研發(fā)企業(yè)級中后臺產(chǎn)品，風格素雅簡潔，喜歡的可以選擇使用，目前在react技術棧領域使用的較為廣泛，各種文檔也比較齊全，遇到問題好解決。

Material-UI

官網(wǎng)地址：https://material-ui.com

Material-UI當下流行的 React UI 框架，組件用于更快速、更簡便的 web 開發(fā)，適合小團隊，或者個人項目快速搭建前端界面，可以自定義主題，Github上面的star挺多的，有超過Ant的趨勢，有空的話可以讀一讀源碼，畢竟這么優(yōu)秀的框架，能學到很多東西。

React-Bootstrap

官網(wǎng)地址：http://react.tgwoo.com

一款基于ReactJS對Bootstrap進行封裝前端組件庫，React-Bootstrap是可重用的前端組件庫。樣式組件依賴于bootstrap。與 Twitter Bootstrap 一致外觀與感受，但通過 Facebook 的 React.js 框架獲得更清爽的代碼。

人臉識別

tracking.js

官網(wǎng)地址：https://trackingjs.com/

Tracking.js 是一個獨立的JavaScript庫，用于跟蹤從相機實時收到的數(shù)據(jù)。跟蹤的數(shù)據(jù)既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現(xiàn)與移動，來觸發(fā)JavaScript 事件。它是非常易于使用的API，具有數(shù)個方法和事件（足夠使用了）。

AR/VR

AR.js

官網(wǎng)地址：https://www.oschina.net/p/ar-js

AR.js 是一款應用于 Web 的高效增強現(xiàn)實（AR）庫，基于 three.js + jsartoolkit5，無需安裝。它適用于任何帶有 webgl 和 webrtc 的手機，且運行速度非常快，在手機上也能高效運行，包括 Android、IOS 和 Windows phone 。

Threejs

官網(wǎng)地址：http://www.webgl3d.cn/

Three.js是基于原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內(nèi)文資料最多、使用最廣泛的三維引擎。

A-Frame

官網(wǎng)地址：https://aframe.io/

A-Frame 是 Mozilla 開源的網(wǎng)頁虛擬現(xiàn)實體驗（ WebVR ）框架，旨在讓創(chuàng)建 WebVR 體驗變得更簡單。它可在移動、桌面、Vive 和 Rift 在內(nèi)的平臺上運行，跨平臺處理 3D 和 WebVR 模板。

A-Frame 被設計成 Web 開發(fā)者很熟悉的模樣，HTML 代碼易于閱讀和復制粘貼。

React VR

官網(wǎng)地址：http://www.vr-react.com/

React VR 是 Facebook 開源的一款用于構建在 Web 瀏覽器中運行的 VR 應用的框架，使用與 React 相同的設計，讓您通過聲明式的組件構建豐富的 VR 世界和 UI。它將現(xiàn)代 API（例如 WebGL 和 WebVR）與 React 的聲明能力結合起來，通過各種設備提供適用于消費者的體驗。

IdeaSpace

官網(wǎng)地址：https://www.ideaspace.cam.ac.uk/

IdeaSpace 是一款用于虛擬現(xiàn)實網(wǎng)頁的 CMS 內(nèi)容管理系統(tǒng)。可以像管理博客一樣管理你的虛擬現(xiàn)實空間和資源。IdeaSpace 使用前面提到的 A-Frame 來實現(xiàn)主題和空間，提供強大的遵循 Web 標準的標識語言。可通過 Oculus Rift 或者 Google Cardboard 在瀏覽器上方便體驗虛擬現(xiàn)實空間，無需安裝插件和應用。

數(shù)據(jù)可視化

AnyChart

官網(wǎng)地址：http://www.anychart.com/

AnyChart 是基于 Flash/JavaScript(HTML5) 的圖表解決方案，它可以輕松地跨瀏覽器、跨平臺工作。除了基礎的圖表功能外，它還有收費的交互式圖表和儀表功能。它可以通過 XML 格式獲取數(shù)據(jù)，該方式讓開發(fā)人員非常靈活地控制圖表上的每一個數(shù)據(jù)點，而當圖表數(shù)據(jù)點數(shù)量偏大時，則可以采用 CSV 數(shù)據(jù)輸入，減小數(shù)據(jù)文件大小和圖表加載時間。

amCharts

官網(wǎng)地址：https://www.amcharts.com/

amCharts 是一款高級圖表庫，致力于對 Web 上的數(shù)據(jù)可視化提供支持。它所支持的圖表包括柱狀圖、條狀圖、線圖、蠟燭圖、餅圖、雷達、極坐標圖、散點圖、燃燒圖和金字塔圖等等。amCharts 庫是一款完全獨立的類庫，在應用中不依賴任何其他第三方類庫，就可直接編譯運行。除了提供最基本的規(guī)范要素外，amCharts 還提供了交互特性。用戶在瀏覽基于 amCharts 制作的圖表時，用鼠標 hover 圖表內(nèi)容，可以與其進行交互，使圖表展示細節(jié)信息，其中呈現(xiàn)信息的容器被叫做 Balloon（氣球）。除此之外圖表可以動態(tài)動畫的形式被繪制出來，帶來了了非常好的展示效果。

Cesium

官網(wǎng)地址：https://cesium.com/cesiumjs/

Cesium 同樣專注于地理數(shù)據(jù)可視化，它是一個 Javascript 庫，可以在 Web 瀏覽器中繪制 3D/2D 地球。無需任何插件即可基于 WebGL 來進行硬件加速。除此之外，它還有跨平臺、跨瀏覽器的特性。Cesium 本身基于 Apache 開源協(xié)議，支持商業(yè)及非商業(yè)項目。

Chart.js

官網(wǎng)地址：http://chartjs.cn/

Chart.js 是一個簡單、面向?qū)ο螅瑸樵O計和開發(fā)者準備的圖表繪制工具庫。它提供了六種基礎圖表類型。基于 Html5，響應式，支持所有現(xiàn)代瀏覽器。同時它不依賴任何外部工具庫，本身輕量級，且支持模塊化，即開發(fā)者可以拆分 Chart.js 僅引入自己需要的部分進入工程。在小巧的身段中它同時支持可交互圖表。

Chartist.js

官網(wǎng)地址：http://gionkunz.github.io/chartist-js/

Chartist.js 是一個非常簡單而且實用的 JavaScript 圖表生成工具，它支持 SVG 格式，圖表數(shù)據(jù)轉換靈活，同時也支持多種圖表展現(xiàn)形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分離，因此代碼比較簡潔，在應用時配置流程十分簡單。它生成的是響應式圖表，可以自動支持不同的瀏覽器尺寸和分辨率，更多的是，它也支持自定義 SASS 架構。

D3

官網(wǎng)地址：https://d3js.org/

2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 發(fā)布了 D3，它是目前 Web 端評價最高的 Javascript 可視化工具庫。D3 能夠向用戶提供大量線性圖和條形圖之外的復雜圖表樣式，例如 Voronoi 圖、樹形圖、圓形集群和單詞云等等。它的優(yōu)點是實例豐富，易于實現(xiàn)調(diào)試數(shù)據(jù)同時能夠通過擴展實現(xiàn)任何想到的數(shù)據(jù)可視化效果，缺點是學習門檻比較高。與 jQuery 類似，D3 直接對 DOM 進行操作，這是它與其它可視化工具的主要區(qū)別所在：它會設置單獨的對象以及功能集，并通過標準 API 進行 DOM 調(diào)用。

echarts

官網(wǎng)地址：https://echarts.apache.org/zh/index.html

一款免費開源的數(shù)據(jù)可視化產(chǎn)品，給用戶提供直觀、生動、可交互和可個性化定制的數(shù)據(jù)可視化圖表。Echarts 上手簡單。其具有的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，幫助用戶在對數(shù)據(jù)挖掘、整合時大幅提高效率。同時，Echarts 提供了豐富的圖表類型，除了常見的折柱餅，還支持地圖、力導向圖、treemap、熱力圖、樹圖等等。更驚艷的是，它還支持任意維度的堆積和多圖表混合展 現(xiàn)。總而言之，這是一款讓我們非常驚喜的可視化產(chǎn)品，非常強大，不過他圖表不是很美觀，對移動端的支持也還有些欠缺，不過這些問題在官方最新發(fā)布的 3.0beta中得到了很大改善

Flot

官網(wǎng)地址：http://www.flotcharts.org/

Flot 是一個純 Javascript 繪圖庫，作為 jQuery 的插件使用。它可以較為輕松地跨瀏覽器工作，甚至包括 IE6。因為 jQuery 的特性，開發(fā)者可以全面地控制圖表的動畫、交互，把數(shù)據(jù)的呈現(xiàn)過程優(yōu)化得更加完美。

HighCharts

官網(wǎng)地址：https://www.highcharts.com.cn/

HighCharts 是一個界面美觀，時下非常流行的的純 Javascript 圖表庫。它實際上由兩部分組成：HighCharts 和 Highstock。其中 HighCharts 能夠很便捷地在 Web 網(wǎng)站或是 Web 應用程序中添加可交互圖表，并可免費用于個人學習、個人網(wǎng)站和其他非商業(yè)用途。目前 HighCharts 支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散點圖和一些綜合圖表。而 HighStock 可以為用戶方便地建立股票或一般的時間軸圖表。它提供先進的導航選項，預設的日期范圍，日期選擇器，滾動和平移等公盟。

富文本

百度UEditor

官網(wǎng)地址：http://ueditor.baidu.com/website/

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼...

bootstrap-wysiwyg

官網(wǎng)地址：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瀏覽器） 允許自定義工具條；不生成額外標簽；
• 支持網(wǎng)站充分利用Bootstrap、Font Awesome等工具庫的優(yōu)秀特性 沒有強制規(guī)定的樣式 - 一切都由你做主 依賴瀏覽器的標準特性，沒有非標準代碼；
• 工具條和鍵盤功能均可定制，并且能夠執(zhí)行任何瀏覽器支持的命令 不會自己創(chuàng)建一個單獨的frame、備份文本區(qū)等 - 本編輯器盡量保持簡單，并僅僅運行在一個DIV內(nèi) （可選）清除尾部空格；清除空的div和span
• 必須運行在現(xiàn)代瀏覽器上（在Chrome 26、Firefox 19、Safari 6上經(jīng)過測試，用戶報告稱可以在IE10上工作） 支持移動設備瀏覽器（在iOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上測試過）

JQUERY NOTEBOOK

官網(wǎng)地址：http://raphaelcruzeiro.github.io/jquery-notebook/

一個簡單，干凈，優(yōu)雅的所見即所得的富文本編輯器.用鼠標選中文字可看到效果。

eWebEditor

官網(wǎng)地址：http://www.ewebeditor.net/

eWebEditor是一個基于瀏覽器的在線HTML編輯器，WEB開發(fā)人員可以用她把傳統(tǒng)的多行文本輸入框textarea替換為可視化的富文本輸入框。eWebEditor主功能不需要在客戶端安裝任何的組件或控件，操作人員就可以以直覺、易用的界面創(chuàng)建和發(fā)布網(wǎng)頁內(nèi)容。您可以通過eWebEditor自帶的可視配置工具，對eWebEditor進行完全的配置。eWebEditor是非常容易與您現(xiàn)有的系統(tǒng)集成，簡單到您只需要一行代碼就可以完成eWebEditor的調(diào)用。您可以把eWebEditor應用于各種基于網(wǎng)頁的應用系統(tǒng)中，如內(nèi)容管理系統(tǒng)、郵件系統(tǒng)、論壇系統(tǒng)、新聞發(fā)布系統(tǒng)，等與內(nèi)容發(fā)布相關的所有應用系統(tǒng)。

KindEditor

官網(wǎng)地址：http://kindeditor.net/demo.php

KindEditor是基于瀏覽器的所見即所得(WYSWYG)HTML編輯器，主要應用于CMS、論壇、博客等WEB程序里。主要特點：

• 代碼量少，功能比較多。
• 通過添加plugin的方法，可以自定義功能。
• 可以刪除不需要的plugin，減少文件大小。
• 可以任意改變編輯器風格，和網(wǎng)站融為一體。
• 代碼容易理解，是一個可維護、可控制的編輯器

WYMeditor

官網(wǎng)地址：http://www.wymeditor.org/

WYMeditor是一個所建即所得Jquery富文本編輯器。支持插件擴展功能，是jwysiwyg的前身，有點龐大，功能齊全。

HtmlBox

官網(wǎng)地址：http://remiya.com/cms/projects/jquery-plugins/htmlbox/

HtmlBox文本編輯器，提供一個textarea表單元素，即可實現(xiàn)一個功能強大的HTML文本編輯器，使用非常簡單。HTMLBox跨瀏覽器、交互性非常好、開源的Jquery富文本編輯器，在Mozilla Firefox, Inrernet Explorer, Opera, Netscape and Safari等常用瀏覽器下測試通過。此編輯器用戶手冊可以幫住你非常容易地把此編輯器整合到自己的Web系統(tǒng)中。

國產(chǎn)富文本編輯-wangEditor

官網(wǎng)地址：http://www.wangeditor.com/

wangEditor基于JavaScript和css開發(fā)的 Web富文本編輯器， 輕量、簡潔、易用、開源免費。與國產(chǎn)編輯器 百度ueditor 和 kindeditor 相比，它輕量、易用、UI設計精致漂亮。與國外編輯器 bootstrap-wysiwyg 和 simditor 相比，它文檔易讀、交流方便，更接地氣。它還會根據(jù)使用者的反饋不斷完善，未來將支持移動版。支持IE6+瀏覽器。

參考：

1、16款優(yōu)秀的Vue UI組件庫推薦 https://www.cnblogs.com/xiaoxiaoMrHuang/p/12321656.html

2、推薦 14 款基于 JavaScript 的數(shù)據(jù)可視化工具 https://www.oschina.net/news/69431/14-popular-data-visualization-tools

3、分享6款優(yōu)秀的 AR/VR 開源庫 https://www.cnblogs.com/zhangqie/p/8116313.htm

關注我

大家也可以關注我的公眾號《腦洞前端》獲取更多更新鮮的前端硬核文章，帶你認識你不知道的前端。