【Web前端基础知识】Web前端常用库和组件汇总

对于初学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强企业使用，是目前是市面上最简单灵活的图表库。