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

前端UI庫

1. Bootstrap

網址：https://www.bootcss.com/

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 Web 項目。Bootstrap支持響應式布局設計，讓一個網站可以兼容不同分辨率的設備，給用戶提供更好的視覺體驗。友好的學習曲線，卓越的兼容性，響應式設計等都是bootstrap的優點。

2. ElementUI

網址：https://element.eleme.cn/#/

Element，一套為開發者、設計師和產品經理準備的基于Vue 2.0的桌面端組件庫。可以很好的搭配vue來進行項目的開發，提供了很多風格統一美觀的組件。

3. Antd Design

網址：https://ant.design/index-cn

antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。封裝了很多開箱即用的react組件，提煉自企業級中后臺產品的交互語言和視覺風格，并使用Typescript開發，提供完整的類型定義文件。

構建工具

1. Webpack

網址： https://www.webpackjs.com/

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

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

2. Gulp

網址：https://www.gulpjs.com.cn/

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

可視化組件

1. Echarts

網址：https://echarts.apache.org/zh/index.html

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

2. HighCharts

網址：https://www.highcharts.com.cn/

方便快捷的純 JavaScript 交互性圖表，Highcharts 已經被成千上萬的開發者及 72 個全球100強企業使用，是目前是市面上最簡單靈活的圖表庫。