web前端有哪些框架

web前端框架有：1、Angular，一种用于创建单一应用程序界面的前端框架；2、react，一个用来构建用户界面的JavaScript开发框架；3、vue，一套用于构建用户界面的渐进式JavaScript框架；4、Bootstartp，是基于HTML、CSS、JavaScript的前端框架；5、QUICK UI，一套企业级web前端开发解决方案；6、SUI，一个前端组件库。

本教程操作环境：windows7系统、Dell G3电脑。

web前端也被称为“客户端”，是关于用户可以看到和体验的网站的视觉方面，即用户所看到的一切Web浏览器展示的内容，涉及用户可以看到，触摸和体验的一切；即web前端包括web页面的结构、web的外观视觉表现以及web层面的交互实现。

web前端框架有哪些

1、Angular

AngularJS由Misko Hevery 等人于2009年创建，后来呗谷歌所收购。它是一款优秀的前端JS框架被应用多多种产品中去。它不仅是一个理念先进的前端开发框架，还是一种端对端的解决方案。它遵循架构设计中的MVC模式，提倡数据与逻辑处理组件的松耦合。AngularJS通过指令技术实现了对HTML的自然扩展，以及通过编译技术实现了数据模型与展现视图的双向自动同步，减轻了复杂的DOM操作。另外它也对前端的自动化测试技术提供了良好的支持。

Angular是一种用于创建单一应用程序界面的前端框架，它有许多核心功能例如数据绑定，服务，指令以及依赖注入等等。它具有模块功能强大，拥有自定义命令等优点

特性：

• 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依赖注入如果代码压缩需要显示声明。

2、React

React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其创新式的VirtualDOM，性能上碾压angularJS，一经推出，火的一塌糊涂。 特点很多，VirtualDOM、JSX、Diff算法等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。

特性

• 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才能写大型应用。

3、Vue

Vue作为最后推出的框架（2014年），借鉴了前辈angular和react的特点（如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等）并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。

特性：

• 1.轻量级的框架

• 2.双向数据绑定

• 3.指令

• 4.插件化

优点：

• 1.简单：官方文档很清晰，比Angular简单易学。

• 2.快速：异步批处理方式更新DOM。

• 3.组合：用解耦的、可复用的组件组合你的应用程序。

• 4.紧凑：~18kbmin+gzip，且无依赖。

• 5.强大：表达式无需声明依赖的可推导属性(computedproperties)。

• 6.对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。

缺点：

• 1.新生儿：Vue.js是一个新的项目，没有angular那么成熟。

• 2.影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库

• 3.不支持IE8。

4、Bootstartp

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

Bootstrap 特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

1）跨设备、跨浏览器

可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下浏览器。

2）响应式布局

不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。

3）提供的全面的组件

Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

4）内置 jQuery 插件

Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。

5）支持 HTML5、CSS3

HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

6）支持 LESS 动态样式

LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

5、QUICK UI

QUICK UI一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

6、MDC Web

Material Components for the web(MDC Web)，谷歌为Web设计的全新前端框架。MDC Web帮助开发人员执行Material Design，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程以构建美观且功能强大的Web项目。

7、Pure

Bootstrap，Patternfly和MDC Web功能非常强大的CSS框架，但非常繁琐复杂。如想要一个轻量级的CSS框架建议尝试Pure.css，本身更接近于CSS编程，但又可以帮助构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架由Yahoo开发根据BSD许可是开源。

8、Foundation

Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。

9、Bulma

Bulma基于Flexbox的开源框架可根据MIT许可证开源。一个非常轻量级的框架，只需要一个CSS文件。Bulma拥有简洁明了的文档可轻松选择想要的主题。还具有许多Web组件可以在设计中使用它们。

10、Skeleton

轻量级框架Skeleton。Skeleton库只有大约400行，且该框架仅提供一些基本的CSS框架组件。Skeleton还是提供了详细的文档来帮助快速上手。

11、Materialize

Materialize 是一个基于 Material Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合的自定义组件为提供默认的样式。Materialize的文档页面非常全面很容易遵循。其组件页面包括按钮，卡片，导航等。

12、Bootflat

Bootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比Bootflat更简单更加轻量级。大部分都是图像没有太多的文字。

13、PatternFly

PatternFly是Red Hat的开源CSS框架，和Bootstrap不同的是Bootstrap是为那些想要创建漂亮网站的人而设计，而PatternFly主要专注于企业应用程序开发人员提供诸如条形图、图表、导航之类的组件，实际上Red Hat就是使用它创建了OpenShift。除了静态HTML，PatternFly还支持ReactJS框架，这是Facebook开发的流行JavaScript框架。PatternFly具有许多适用于企业级应用程序的高级组件，如条形图，图表，模式和布局。

14、flex

Flex目前还在孵化阶段，还不是Apache的正式项目，Flex4.8也不是一个正式的Apache版本。，该版本标志着Flex新时代的开始，Flex的未来将由社区来驱动而不是由一个公司驱动。开发者可以通过贡献代码来帮助改进Flex，如修复bug、增加功能等。

以上就是小千分享的Web前端开发常用的一些框架。程序员们可以根据自己的业务需求选择简洁直观、功能强大的前端开发框架，让自己的工作更迅速简单，提高开发的效率。

15、SUI

“SUI 是一套基于bootstrap开发的前端组件库，同时它她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。 果然 还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… )，当然了就像广告说的，如果你之前用过 Bootstrap， 那么可以轻松转 向 SUI，这可能就是淘宝给前端屌丝们的福利了。。 

Github：https://github.com/sdc-alibaba/sui

官网：http://sui.taobao.org/sui/docs/index.html

（学习视频分享：web前端）

以上是web前端有哪些框架的详细内容。更多信息请关注PHP中文网其他相关文章！