Web前端的流行框架推荐

今天小编要跟大家分享的文章是关于Web前端的流行框架推荐，正在从事Web相关工作的小伙伴们来和小编一起看一看吧，希望这些推荐的框架能够对你有所帮助。

一、vue前端框架

Vue(读音/vju_/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue

被设计为可以自底向上逐层应用。Vue

的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue

也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习Vue之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道Vue与其它库/框架有哪些区别，请查看对比其它框架

vue学习官网：#/v2/guide/

vue中文社区：#/

二、React框架

React可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时React也可以高效地更新渲染界面。

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

React学习官网：#/

ReactNative中文网：#/

三、Angular框架

Angular是一个以JavaScript编写的库，拥有良好的应用程序，模板的功能非常强大，自带丰富的angular指令，可以通过指令扩宽HTML，而且可以通过表达式绑定数据到HTML，因为引入了Java的一些内容，所以很容易就可以写出复用代码，有效提高了团队开发的速度。

Angular学习官网：#/

AngularJs中文学习官网：#/

这是目前前端比较流行的框架，当然学习框架之前，一定要学好基础，例如：Html5、Css3、Jscript以及响应交互式页面搭建。

以上就是小编今天为大家分享的关于Web前端的流行框架推荐的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利！

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为：https://nodejsorg/en/

在 nodejs官网下载最新版稳定版的nodejs安装，自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装，可以使用淘宝的镜像：http://npmtaobaoorg/

在终端输入以下命令：

检测cnpm是否安装成功

vue-cli是vue脚手架工具，方便打包，部署，测试等。

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

1、不同点：AngularJS的学习成本高，比如增加了DependencyInjection特性，而Vuejs本身提供的API都比较简单、直观。在效能上，AngularJS依赖对资料做脏检查，所以Watcher越多越慢。Vuejs使用基于依赖追踪的观察并且使用非同步伫列更新。

2、Vue更容易上手！目前Vue是排名第三的前端框架。正式因为他简单易学，很多前端开发工程师可以很快掌握并且应用到实际开发中。

3、缺点：新生儿：Vuejs是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vuejs多样性或者说丰富性少于其他一些有名的库不支持IE8。

1

解决方法：

Should werun`npm install`foryou after the project has been created (recommended) 

- Yes,useNPM 

- Yes,useYarn 

 -No, I will handle that myself

选择最后的no，I will handle that myself

前端Vuejs框架是什么？有哪些特点？Vuejs是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。

科普时刻 ：

黑马程序员vue前端基础教程-4个小时带你快速入门vue

前端开发利器vue，微信小程序快速开发实战

web前端基础必备教程-2小时玩转Vue单元测试

黑马程序员Vue20+Vue30入门到精通，大厂前端岗位必备技能

1、Vuejs是什么？

Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vuejs是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue的MVVM设计模式是什么？

如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过操作数据来进行而尽量避免操作DOM树。

不关注DOM结构，考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作，而是专心于对用户的操作进行处理，避免MVC中control层过厚的问题。

在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。

3、Vuejs有哪些优点？

声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定

（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等操作；

（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；

（3）简单理解为Vue帮我们做了DOM操作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关操作；

（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。

4、需要学习哪些Vuejs框架相关知识点？

Vuejs 安装、Vuejs 目录结构、Vuejs 起步、Vuejs 模板语法、Vuejs 条件语句、Vuejs 循环语句、Vuejs 计算属性、Vuejs 监听属性、Vuejs 样式绑定、Vuejs 事件处理器、Vuejs 表单、Vuejs 组件、Vuejs 组件自定义事件、Vuejs 自定义指令、Vuejs 路由、Vuejs 过渡& 动画、Vuejs 混入、Vuejs Ajax(axios)、Vuejs Ajax(vue-resource)、Vuejs 响应接口、Vuejs 实例等。

Vuejs 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angularjs，Vuejs供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vuejs。

通过尽可能简单的API实现响应的数据绑定和组合的视图组件 （摘自Vuejs官网）

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

适用场景

如果你还在用jquery频繁操作你的DOM来更新页面的话，那么，你可以用Vuejs来解放你的DOM操作了。

如果你的项目中有多个部分是相同的，并可以封装成一个组件，那么，你可以试试用Vuejs。

此外，Vuejs的核心实现中使用了ES5的ObjectdefineProperty特性，IE8及以下版本浏览器是不兼容的，所以，你的项目需要兼容这些较低版本的浏览器的话，那么，Vuejs就不适用了。

毕竟，开发一个项目的目的不是为了使用某个框架。

希望对您有所帮助

1什么是elementUI

ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架

大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面

2elementUI使用

https://elementelemecn/#/zh-CN/component/installation

3elementUI优化

默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中

这样就导致了我们的项目体积比较大, 用户访问比较慢

4如何优化

为了解决这个问题, elementUI推出了按需导入, 按需打包 也就是只会将我们用到的组件打包了我们的项目中

没有用到的组件不会被打包

https://elementelemecn/#/zh-CN/component/quickstart

1什么是MintUI

MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装，让我们能够专注于业务逻辑而不是UI界面

2mintUI使用

http://mint-uigithubio/#!/zh-cn

3注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vuecomponent来告诉Vue我们需要使用

1什么是Vant

在使用MintUI的过程中发现有很多的坑，所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架

大白话:和Bootstrap一样对原生的HTML标签进行了封装，进行了美化，让我们能够专注于业务逻辑而不是UI界面

Vueuse只能use插件，不能use组件

那么如何将一个组件封装成一个插件呢？

1Vueuse()做了什么事情

Vueuse的作用是注册一个Vue插件(注册组件), Vueuse必须在new Vue之前使用

2什么时候需要定义插件

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件

例如: 网络加载指示器

3如果自定义一个插件

https://cnvuejsorg/v2/guide/pluginshtml#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6

vue是什么

Vuejs (读音 /vju/，类似于 view) 是一套基于javascript的用于构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

vue特点

简洁、轻量、组件化、快速、数据驱动、模块友好

vue和其他前端框架区别

1与AngularJS的区别

相同点：

都支持指令：内置指令和自定义指令。

都支持过滤器：内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点：

1>AngularJS的学习成本高，比如增加了Dependency Injection(依赖注入)特性，而Vuejs本身提供的API都比较简单、直观。

2>在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

Vuejs使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说，这个优化差异还是比较明显的。

手机渲染速度：angular1 300ms vue 200ms react 100ms

2与React的区别

相同点：

React采用特殊的JSX语法，Vuejs在组件开发中也推崇编写vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。

中心思想相同：一切都是组件，组件实例之间可以嵌套。

都提供合理的钩子函数，可以让开发者定制化地去处理需求。

都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。

在组件开发中都支持mixins的特性。

不同点：

React依赖Virtual DOM,而Vuejs使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vuejs在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

vue的应用场景

简单地说，就是需要对 DOM 进行很多自定义操作的项目小项目;理论上 Vue 配合类似Flux的架构也可以胜任超大规模多人协作的复杂项目。