前端主流的三大框架,现在企业的主流前端框架有哪些？

！

企业主流的前端框架

1、

Angular.js

github排名：star:59.6K

angular框架算是前端框架中的常青树，自2009年由Misko Hevery等人创建后，在前端框架中一直占有重要的地位。angular是一款优秀的前端JS框架，被用于Google的多款产品当中。angularJS有着诸多特性，最核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等，这些特性都是前端人员非常喜欢的东西。

曾经作为最流行的前端js框架，现在热度也在慢慢降低，体量大，不适合小项目使用，使得angular不再享受独宠。

2、Vue.js（三大主流框架之一）

github:star: 163K

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [2] 。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [3] ，Vue.js 也能完美地驱动复杂的单页应用。

有以下几个特点：

(1) 易用

已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！

(2) 灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

(3) 高效

20kB min+gzip 运行大小超快虚拟 DOM最省心的优化

3、react.js（三大主流框架之一，GitHub排名仅次Vue）

github: star: 148K

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

有以下几个特点：

(1) 声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

(2) 组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

(3) 一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

ReactJS vs Angular5 vs

Vue.js

的使用情况

总的来说，React和Angular一直保持着相对一致的发展步调。如果要我尝试做个预测，那么React会持续升高，Angular有所下滑。Vue.js依然不是很明晰，不过由于其框架的简洁性，发展也不错。

下面我们各个框架的优缺点：

(1) Angular 5

Angular是一个从2009年就开始推出JavaScript MVVM框架，对于构建高度可交互的网页应用非常方便。

优点

• 新特性：RXJS，快速编译（3秒内），新的HttpClient；
• 详细的文档几乎涵盖了所有必须的信息，你甚至不需要向同事咨询。不过，你需要更多的时间去学习；
• 数据双向绑定，可以减少出错的风险；
• MVVM(Model-View-ViewModel)使得开发者可以针对同一个App模块同时开发；
• 依赖注入使得模块化和模块中组件引入更加方便；

缺点

• 与生俱来的复杂的语法；好在Angular 5使用TypeScript 2.4，已经简单多了；
• 迁移问题：从低版本升级到新版本的时候，不兼容导致迁移成本高。

使用Angular 5的公司：Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase。

(2) ReactJS

ReactJS是一个Facebook在2013年开源的JavaScript库，可以非常方便地构建大型网页应用。

优点

• 易于学习：由于语法十分简洁，和Angular相比，React要容易得多。工程师只需要重温一下HTML的基本知识就足够。根本不需要像Angular一样，还要深度学习TypeScript。
• 高度的灵活性；
• 虚拟DOM将HTML，XHTML、或则XML的文档格式化成树形结构，这样浏览器可以更容易理解；
• 结合ES6/7，React可以很容易写出各种酷炫代码；
• Downward数据绑定，也就是说父节点的数据不会受到孩子节点的影响；
• 100%的开源，每天都有来自全世界无数的开发者的更新和改进；
• 绝对的轻量级，因为数据处理既可以在用户端，也可以在服务端；
• 版本迁移非常容易，Facebook提供了”codemods”来自动化这一过程。

缺点

• 缺乏官方文档：ReactJS的快速开发使得文档的缺乏，众多开发者的维护也使其缺乏一个系统化的思路；
• React因为太灵活增加了决策成本而不好使；
• 需要很长的时间去掌握，因为ReactJS需要你对如何将UI和MVC框架整合有一个足够深度的理解。

使用ReactJS的公司： Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft。

(3) Vue.js

Vue.js是一个2013年诞生的前端框架，非常适合用于构架非常灵活的UI和复杂的单页面应用。

优点

• 强化的HTML，也就是说Vue.js有着很多和Angular相似的特点。
• 详细的文档，Vue.js有着超级友好的文档，开发者可以快速的学会，这将会节省很多时间；
• 可适用性：你可以很快地从其它框架转移到Vue.js，因为它和Angular以及React都有一定的相似性；
• 非常棒的整合性：Vue.js可以同时用于单页面应用和更加复杂的网页应用。主要在于你可以用它编写很小的可交互部件，然后可以很容易地整合到现有的项目中而不会影响到整个系统；
• 可扩展性：Vue.js可以用于快速开发大型复用模板；
• 体积小：Vue.js只有20KB左右的大小，使得其速度和灵活性相对于其它框架都好不少。

缺点

• 资源匮乏：Vue.js依然在整个市场中只占有很小的比例，所以相应的资源、知识要少很多；
• 灵活性带来的风险：有时候，将其整合到大型项目的时候会有一些问题，但是你不见得能够找到解法；
• 来自中国：许多的元素和描述依然使用中文。这对于开发中会引入一些复杂性，好在越来越多的相关资料已经被翻译成英文。

使用Vue.js的公司：小米, 阿里巴巴, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters。

我们看下最近几年的前端招聘

一般的前端公司都需要精通这几个框架的 ；

总结

如果向从事前端，走的 更远，这几个框架是必须要精通的。

前端最新的UI库有哪些啊，萌新跪求？

刚好看到这个问题，给你推荐一些吧，因为最近也有做这方面的分享。欢迎一起交流讨论！

Vue.js技术栈组件库

vue PC端组件库

1、Element『github star 45.6K』

饿了么团队开发的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 桌面端组件库。

2、iView『github star 23.3K』

一套基于 Vue.js 的高质量UI 组件库。目前统计使用 iView 组件库的大厂有：今日、阿里巴巴、腾讯、百度、京东、滴滴、美团、新浪...

3、Vuetify『github star 25.8K』

基于Vue.js的Material Design组件框架。包含手工制作的精美材料组件。不需要设计技能，也能创建令人惊叹的应用程序。

4、Quasar『github star 14.9K』

基于Vue.js的开源框架，允许Web开发人员快速创建多种类型的responsive++网站/应用，编写代码一次并同时将其部署为网站、移动应用或Electron应用。

5、Ant Design Vue『github star 10.5K』

基于 vue.js 和 Ant Design 样式的 UI组件库，开发和服务于企业级产品。

6、BootstrapVue『github star 11.6K』

基于 Bootstrap v4 + Vue.js 的前端 UI 框架。基于flexbox弹性布局，用于在web上构建响应式，移动优先的项目。

7、Muse-UI『github star 8.1K』

基于 Vue 2.0 优雅的 Material Design UI 组件库。

vue 移动端组件库

1、Mint-UI『github star 15.8K』

饿了么前端团队开发的基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需求。

2、Vant『github star 13.9K』

有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件。

3、Cube UI『github star 8.1K』

滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

4、NutUI『github star 1.9K』

京东自研的轻量级移动端Vue组件库，目前最新的版本是2.2.5，有近50多个组件。开发和服务于移动Web界面的企业级前中后台产品。

React.js技术栈组件库

1、Material UI『github star 58.1K』

基于 Google Material Design 设计规范的 React 组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

2、React WeUI『github star 2.7K』

微信团队出品的基于 React / WeUI 的 移动端 UI 组件库。

3、Ant Design Mobile『github star 8.3K』

支付宝团队出品的基于 Preact / React / React Native 移动端UI组件库。

4、Pile『github star 256』

滴滴团队基于 React 的移动端开发组件库。 组件丰富、轻量、易用，包含 50多 个交互功能，支持多语言与自定义皮肤。

5、Onsen UI『github star 8K』

Onsen UI 专为移动应用程序设计的丰富UI组件应用程序框架。可以用于与当下流行框架（如 Vue.js、AngularJS 1、Angular 2+和React）更紧密地集成。

好了，就推荐到这里，如果想要了解更详细的介绍，可以去看看下方的链接文章。

https://www.toutiao.com/i6834426578668093956/

https://www.toutiao.com/i6832455087994962435/

https://www.toutiao.com/i6836313110047883787/

❤️ 最后

如果小伙伴们有比较喜欢的UI组件库，也可以在评论区留言，欢迎一起交流讨论。

前端框架哪一个在国内最火？

目前流行的5个前端框架汇总！

如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是模块化的，允许你仅使用所需的组件，甚至可以混合使用来自不同框架的组件。

本文依据各个框架的GitHub流行度来顺序介绍。

1、Bootstrap

Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长，你可以放心的选择这个框架，而不必担心项目会失败，因为具有广泛使用基础的框架，不太可能被抛弃。Bootstrap是最流行的HTML，CSS和Java框架，用于在网络上开发响应式、移动的Web项目。

核心概念/原则： RWD和移动端优先。

框架大小： 154 KB

预处理器： Less和Sass

响应式布局：是

模块化：是

启动模板/布局：是

图标集： Glyphicons Halflings设置

附加/附件：无捆绑，许多第三方插件可用。

独特组件： Jumbotron

文档资源：良好

自定制：基本GUI定制器。但是你需要手动输入颜色值，因为没有颜色选择器可用。

浏览器支持： Firefox，Chrome，Safari，IE8 +（您需要IE8的Respond.js）

许可证： MIT

bootstrap说明

Bootstrap的广泛流行是它的优势所在。在技术上，它不一定比列表中的其它框架更好，但它提供了比其它四个框架更多的资源（文章和教程、第三方插件和扩展、主题构建器等）。简而言之，Bootstrap 无处不在，这是人们继续选择的主要原因。

2、Foundation

Foundation是排在第二名的框架。ZURB这样坚实的公司一直支持着Foundation，所以这个框架有强大的基础。Foundation现已用于许多大型网站，包括Facebook，Mozilla，Ebay，Yahoo！和国家地理等。可以说foundation世界上最先进的响应式前端框架了。

核心概念/原则： RWD，移动端优先，语义。

框架大小： 197.5 KB

预处理器： Sass

响应式布局：是

模块化：是

启动模板/布局：是

图标集： 基础图标字体

额外/附加组件：是

独特的组件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

文档资源：良好，还有许多额外资源。

自定制：基本的GUI定制程序，类似于Bootstrap定制工具。

浏览器支持： Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+

许可证：MIT

Foundation是一个真正的专业框架，提供业务支持、培训和咨询。它还提供了许多资源来帮助你更快更轻松地学习和使用该框架。

3、Semantic UI

Semantic UI是一个语义化设计的前端开源框架。它利用自然语言原理，从而使代码更加可读和可理解。基于自然语言原则的UI组件框架。

核心概念/原则：Semantic, tag ambivalence, responsive。

框架大小： 806 KB

预处理器：少

响应式布局：是

模块化：是

启动模板/布局：是，并提供了一些基本的入门模板

图标集： Font Awesome

额外/附加组件：否

独特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。

文档资源：非常好，Semantic提供了一个非常有组织的文档，另外还有一个单独的网站提供入门指南、自定义和创建主题。

自定义：没有GUI定制器，只有手动定制。

浏览器支持： Firefox，Chrome，Safari，IE10 +（仅IE9浏览器前缀），Android 4，Blackberry 10

许可证：MIT

Semantic是这里所讨论的所有框架中，最具创新性和全功能的框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

4、Pure

Pure是一种轻量级的模块化框架，采用纯CSS编写，具有可根据需要一起使用或单独使用的组件。一套小而灵活的CSS模块，能够在每个Web项目中使用。

核心概念/原则： SMACSS，极简主义。

框架大小： 16 KB

预处理：无

响应式布局：是

模块化：是

启动模板/布局：是

图标集：无。可以改用Font Awesome。

额外/附加组件：无

独特组件：无

文档资源：很好

自定义：基本GUI皮肤生成器

浏览器支持：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x

许可证： Yahoo! Inc. BSD

Pure为你的项目提供了一个干净的开始，只提供基本框架。对于不需要全功能框架但仅包含在其工作中的特定组件的人来说，pures是一个理想的选择。

5、UIkit

UIkit是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎，但它提供了相同的功能和质量。用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。

核心概念/原则： RWD，移动端优先

框架大小： 326.9 KB（如果包含uikit-icons.min.js与SVG图标相关的功能，则为384.4 KB ）

预处理器：少，Sass

响应式布局：是

模块化：是

启动模板/布局：是

图标集： UIkit自带SVG图标系统和类库，其中包含越来越多的大纲图标。

额外/附加组件：是

独特的组件：Article, Flex, Cover, HTML Editor

文件：好

自定义：高级GUI定制程序仅在版本2（以前的版本）中可用

浏览器支持： Chrome，Firefox，Safari，IE9 +

许可证：MIT

UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制（以前版本的框架还提供了高级GUI定制程序）。

在选择框架时，可以从以下几个方面考虑：

所选的框架是否有足够的人气，更多的人气意味着更多的人参与项目，也意味着有更多的教程和社区文章、更多的实例和网站、更多的第三方扩展、更好的相关的Web产品可与其集成。受欢迎程度也意味着框架更具前瞻性，因为具有更大社区的框架不太可能被抛弃。

框架是否正在积极发展,一个好的框架需要不断地使用最新的web技术，特别是在移动端方面。

框架是否达到成熟,如果一个特定的框架在现实项目中还没有被使用和测试，那么将其用于你的专业项目，可能不是一个明智的选择。

框架是否提供了良好的文档,为了方便学习过程，总是需要良好的文档。

框架的特异性是什么,这里的要点是，与具有高级别特异性的框架相比，更通用的框架更容易使用。在大多数情况下，最好选择一个应用最小样式的框架，因为它更容易自定义。与重写现有的CSS规则相比，添加新的CSS规则是一个更方便有效的做法。