對(duì)于初學(xué)Web前端的人來說，首先需要了解一些前端開發(fā)中的工具，有利于提升開發(fā)效率，在這里我們梳理一下目前比較常用的庫，組件和構(gòu)建工具。

前端UI庫

1. Bootstrap

網(wǎng)址：https://www.bootcss.com/

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 Web 項(xiàng)目。Bootstrap支持響應(yīng)式布局設(shè)計(jì)，讓一個(gè)網(wǎng)站可以兼容不同分辨率的設(shè)備，給用戶提供更好的視覺體驗(yàn)。友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)等都是bootstrap的優(yōu)點(diǎn)。

2. ElementUI

網(wǎng)址：https://element.eleme.cn/#/

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于Vue 2.0的桌面端組件庫。可以很好的搭配vue來進(jìn)行項(xiàng)目的開發(fā)，提供了很多風(fēng)格統(tǒng)一美觀的組件。

3. Antd Design

網(wǎng)址：https://ant.design/index-cn

antd 是基于 Ant Design 設(shè)計(jì)體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。封裝了很多開箱即用的react組件，提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格，并使用Typescript開發(fā)，提供完整的類型定義文件。

構(gòu)建工具

1. Webpack

網(wǎng)址： https://www.webpackjs.com/

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

在webpack看來一切都是模塊!這就是它不可不說的優(yōu)點(diǎn)，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有通過合適的loaders，它們都可以被當(dāng)做模塊被處理。

2. Gulp

網(wǎng)址：https://www.gulpjs.com.cn/

gulp是一個(gè)自動(dòng)化工具，前端開發(fā)者可以使用它來處理常見任務(wù)，如搭建web服務(wù)器，熱加載，使用預(yù)處理器sass，less，優(yōu)化資源壓縮css,javascript，圖片等。另外gulp基于node強(qiáng)大的流(stream)能力，gulp在構(gòu)建過程中并不把文件立即寫入磁盤，從而提高了構(gòu)建速度。

可視化組件

1. Echarts

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

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等)，底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

2. HighCharts

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

方便快捷的純 JavaScript 交互性圖表，Highcharts 已經(jīng)被成千上萬的開發(fā)者及 72 個(gè)全球100強(qiáng)企業(yè)使用，是目前是市面上最簡(jiǎn)單靈活的圖表庫。