Web前端三大主流框架是：
React
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合
优点：
1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2.跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构
5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏
缺点：
React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。
Vue
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。
它有以下的特性：
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点：
1.简单：官方文档很清晰，比Angular简单易学。
2.快速：异步批处理方式更新DOM。
3.组合：用解耦的、可复用的组件组合你的应用程序。
4.紧凑：~18kbmin+gzip，且无依赖。
5.强大：表达式无需声明依赖的可推导属性(computedproperties)。
6.对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。
缺点：
1.Vue.js是一个新的项目，没有angular那么成熟。
2.影响度不是很大：有关于Vue.js多样性或者说丰富性少于其他一些有名的库
3.不支持IE8。
Angular
Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
它有以下的特性：
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点：
1.模板功能强大丰富，自带了极其丰富的angular指令。
2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3.自定义指令，自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
缺点：
1.angular入门很容易但深入后概念很多,学习中较难理解。
2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。
3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。
4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。
5.DI依赖注入如果代码压缩需要显示声明。
前端常用组件库
element-ui
1. Element-UI 是现在基于 Vue 的一个非常好用的桌面端 UI 组件库
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、支持自定义主题
3. 文档清晰，学习成本低
4. 提供的组件足够使用
5. UI 的风格符合目前大众的普遍审美
6. 如果你想要做一个公司级别的产品，那么 Element-UI 基本可以满足需求，但是难免样式、风格上会同质化严重
常用的element-ui组件：
最常用到的表格、表单、按钮、树形控件
Bootstrap
整个前端开发的历史，我把它分成了三个阶段，web 1.0 、web 2.0 和 web 3.0。
对于 web 1.0 来说， 指的就是 html、css、js的那个阶段，整个前端的交互还都是以一种原生的方式进行展示，这个时候还没有前端工程师的概念，或者说这个概念很稀薄，大部分的前端工作都是由后端的工程师来兼职进行开发的。
而 web 2.0 阶段，最大的标志就是 jQuery、bootstrap、还有各种模板引擎的库开始出现，这个时候开始逐渐有了前端开发工程师的岗位，但是前端依然不够兴盛，因为虽然这些新出现的东西使前端的开发有了一些壁垒，但是这种壁垒明显不够坚固，并且这些库并没有带来太大的本质上的变化，更多的是一种增强。
而 web 3.0 阶段，最大的标志就是 angular、react、vue 的出现。从最初 google 推出了 angular 1， angular 1 一出现，确实可以说是惊艳。他把之前零零碎碎的内容，比如数据驱动，比如模板语法，比如模块化的东西进行了整合，变成了一个大一统的框架。但是因为 angular 1 属于一个最初的尝试，所以在设计上还有很多不完善的地方，这就导致了 angular 的变化过大，成了一个断层，就引起了很多人的不满。
Bootstrap 的特点：
1. Bootstrap 是 Twitter 所设计的一个 UI 库，以 css 样式为主，也提供了一些组件的功能需要配合 js 来进行使用
2. 使用简单，文档清晰，学习成本低
3. 提供的组件相对较少
4. 可以只使用框架中的 css 样式，可嵌入性较高
5. UI 的风格符合目前大众的普遍审美
6. 适合使用在对游览器兼容性有要求的项目中
Vant-UI
Vant-UI 是有赞前端团队开发的一个基于 vue 的移动端组件库。不过对于移动端组件库来说，它和桌面端有非常多的不同。
比如说，官方的文档，对于移动端的组件库文档来说，大部分都会把整个项目中所有的组件通过一个类似于手机的UI形式给一次性全部罗列出来。
这个在 PC 端的 UI 库中，大家应该很少见吧。我个人是比较喜欢这种方式的，因为这样它可以让开发者很方便的知道，这个 UI 库它的各个组件的样式效果，是否可以满足个人的需求。
还有关于兼容性方面，因为是移动端的组件库，那么它都会运行在手机上，而对于手机来说就不会存在 PC 端浏览器 IE 兼容性的问题了。更多的是关于手机系统版本的问题。咱们就以 Vant-UI 为例，他在浏览器支持这方便介绍说，现代浏览器以及 Android 4.0，IOS 8.0 以上的系统都支持，那么以咱们现在的这个时间点来说，基本上就不会存在兼容性的问题了。
还有就是组件的样式风格上，因为对于移动端设备来说，毕竟大小、尺寸、操作方式都不一样，所以在 UI 的一个整体设计风格上，肯定和 PC 端上有很大的不同。
Vant-UI的特点：
1. Vant-UI 是有赞前端团队所设计的一个 UI 库，一般用于基于 Vue 的移动端项目
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、提供了定制功能（样式、颜色、主题等等）
3. 文档清晰，学习成本低
4. 提供的组件足够使用，性能不错，并且提供了基于商城业务的成套组件
5. UI 的风格以及交互操作可以达到现在的主流标准
6. 适用于 web app 或者 基于移动端的网页开发
ECharts
商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达 图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。
Layui
layui 的主要内容被分成了两个大的部分，1.页面元素。 2.内置模块
对于页面元素来说，主要就是一些 css 的样式，也就是一些定义好的 css 样式类，这一点和 bootstrap 很像。
对于内置模块来说，是 layui 比较推崇的一个概念。比如按需引入的模块化。当然这个概念对于现在的前端开发来说，已经变成了一个普遍的功能点了。比如我们前面说到的 Element-UI、vuetify、And Design 都拥有这个功能。 但是在 web 2.0 阶段的时候，这个模块化的功能还是比较先进的。
至于 layui 中所涉及到的样式部分，按照现在的一个审美来说依然是不过时的，所以说对于现在来说，如果你对前端的技术了解的并不深，或者说你是一个服务端工程师，那么想要开发一个前端页面的话，layui 依然是一个比较好的选择。
总结下 layui：
1. layui 是 自由职业者（贤心）进行开发的一个前端库，最低可以兼容到 IE8
2. 设置的初衷是让非前端的工程师可以很方便的开发前端页面
3. 使用简单，文档清晰，学习成本低
4. 提供页面元素和模块化的概念
5. UI 的风格并不过时
6. 适合非专业前端工程师使用
Vuetify
vuetify 是麻省理工学院的开源项目，文档同样支持全球化，它是基于 Android Material Design 风格的一个 vue 前端组件库。同样支持 @vue/cli 项目的直接添加。
不过 vuetify 的 Material Design 风格在国内并不是很大众， Material Design 是由Google开发的设计语言，第一次公开使用应该是在 Android 5.0 上面，但是在国内这种样式风格一直推行的效果不好。在国外这种风格被接受的程度还可以，但是国内你会发现很少见。
这样就导致这种设计风格不会存在大量同质化的问题。同样的如果你使用了这种风格的话，也必须要承担一定的风险。所以对于公司级项目来说，如果使用了 vuefity 的话，那么无形中就会为产品增加一些风险。不过如果你是要做一个自己的项目，并且希望你的项目拥有一些自己的个性，那么 vuetify 无疑是一个很好的选择。
对于 vuetify 本身的一个功能层面上，它的文档、它的组件都可以完全满足我们的一个日常使用，比如，在它的 UI 组件里面，我们常用到的这些组件都是比较全的。
另外它还提供了一些扩展的指令，这些指令是在 vue 的基础上做的一些扩展，可以满足一些特定的需求。
总结一下 vuetify：
1. vuetify 是国外团队进行开发的一个基于 vue 的组件库
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、提供了定制功能（样式、颜色、主题等等）
3. 文档相对清晰，但是和国人的思维不太一样，导致学习成本相对高一些
4. 提供的组件足够使用，并且提供了 v- 开头的扩展指令，还有付费专题模块
5. UI 的风格使用的是 Google 推出的 Material Design 的设计风格，在国内推广度相对低一些
6. 使用 vuetify 在 UI 样式上，会有一些额外的风险，但是可以避免同质化的问题，比较适合一些个人或者需要彰显个性的项目
Ant Design
Ant Design 被官方定义为一种设计体系，不过设计体系这种高雅的东西，对咱们这些俗人应该认知不大，我们所认知最明确的，就是这个东西能为我们的开发带来什么帮助。所以我们下面就把它当作一个 UI 库来看。
Ant Design 在 react 中的地位，应该和 element UI 在 vue 中的地位是一样的，都可以说是最火爆的 UI 库之一。
Ant Design 同时支持 React、Vue、Angular，也就是说我们在这三个主流框架中都可以使用，但是 Ant Design 对于React 的支持是最好的，所以一般我们说到 Ant Design ，都会说他是一个基于 React UI 的一个组件库。
Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库，目前最新的是 4.x 的版本，我们看它的主页，就能够感觉出来，一个整体的设计风格是非常赞的。
同样，像国际化、定制主题的这些功能，Ant Design 也同样是支持的，这个没得说，具体怎么做，大家看文档。
总结一下 Ant Design：
1. Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库，一般用于基于 React 的项目
2. 支持在 create-react-app（React 官方脚手架） 项目的直接添加，支持按需导入、国际化、提供了定制主题
3. 文档清晰，学习成本低
4. 提供的组件足够使用，并且提供了精品社区服务
5. UI 的风格符合目前大众的普遍审美
6. 如果你想要做一个公司级别的产品，那么 Ant Design 基本可以满足需求，但是难免样式、风格上会同质化严重
weui
weui 是微信官方团队开发的一套同微信原生视觉体验一致的基础样式库。提供了一些组件和样式的简单使用。主要应用于微信内部网页和微信小程序。
对于 weui 的文档没有放到官网上，而是在 guthub 中。这个大家注意下，别找不到文档就可以。不过微信的文档是相对比较乱的，并且有一些示例代码的地址已经打不开了（2020-03 时测试）。这就导致大家如果想要学习 weui 的使用，那么只能从 github 上下载一下实例代码来学习了
weui 的话我们不做过多介绍，简单总结下：
1. weui 是微信官方团队开发的一套同微信原生视觉体验一致的基础样式库。
2. 因为只应对微信内部网页和微信小程序，所以所提供的功能相对简单。
3. 文档稍微乱一些。
4. 提供的功能组件有限，主要还是应对场景的问题。
5. UI 的风格同微信原生视觉体验一致
6. 适用微信内部网页和微信小程序。
