前端开发技术团结互助，让我们共同进步！

当前位置：主页 > 技术资讯 > 开发技术 > 前端开发技术 >

我们的优势： 10年相关行业经验，专业设计师量身定制设计师一对一服务模式，上百家客户案例！企业保证，正规流程，正规合作 7*24小时在线服务，售后无忧

Vue、React、Angular前端框架优势对比

文章来源：https://www.023niu.com 围观次数：

分享到:

摘要：随着时间和技术的发展，前端框架从jQuery一家独大的情况，发展到现在的Vue、React、Angular三足鼎立的情况，三个框架各有优略

随着时间和技术的发展，前端框架从jQuery一家独大的情况，发展到现在的Vue、React、Angular三足鼎立的情况，三个框架各有优略，也都是比较成熟，但从国内的前端使用现状来看，使用最多的两个框架是Vue、React，我们再来对比一下Github上的Star数：

Vue.js是一款极简的MVVM框架，如果让我用一个词来形容它，就是“轻巧”。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。为什么这么说，因为Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js却一直受到一定程度的关注，而其本身也在高速发展中，不论是生态、社区、资源、插件等等都在日趋壮大。

如果Vue.js是整个生态系统的核心，它是老板，我会把Vuex在第二位。任何人谁也了解到阵营知道终极版的重要性，并Vuex到Vue公司就像是Redux的反应。

Vuex是为Vue.js应用程序开发的状态管理模型。通过流量和Redux的启发，但简化的概念和实施是国家管理架构专为Vue.js应用而设计。如果您的应用程序足够简单，我们建议您不要使用Vuex。但是，如果您需要构建中型到大型单页应用程序，则很可能会考虑如何更好地管理组件外部的状态，而Vuex将是自然的选择。

言归正传，什么是状态管理模型？告诉我我的理解。当你正在开发一个应用程序，你肯定会打破许多组件的开发，以及每个组件都必须是逻辑相关。组件之间的“通信”于是成为一个开放的问题。以前我们尝试通过事件广播来做到这一点，但是随之而来的问题是，随着应用程序的不断扩展和更改，事件变得越来越复杂，越来越出乎意料，并且调试也变得越来越困难。追踪错误变得更加困难。这当然不是我们想要的。我们希望应用程序的所有部分都易于维护，扩展，调试和预测。结果，出现了状态管理模型。下图是Vuex实现单向数据流的示意图：

Vue Router 是Vue.js官方的路由插件，它和Vue.js是深度集成的，适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在Vue Router单页面应用中，则是路径之间的切换，也就是组件的切换。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

作为Vue的脚手架，Vue CLI无疑是出色的。它可以帮你快速的上手Vue构建的工程，而无需再花多余的时间去熟悉Vue工程的文件系统。

使用它的方法也很简单：

安装Vue CLI3：
```
npm install -g @vue/cli
```
查看版本号：
```
vue –V
```
创建项目：
```
vue create project-name
```
进入项目：
```
cd project-name
```
运行项目：
```
npm run serve
```

需要注意的是：

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过
```
npm uninstall vue-cli -g
```
或
```
yarn global remove vue-cli
```
卸载它
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

有赞前端团队开发的一款轻量、可靠的移动端 Vue 组件库，60+高质量组件，95%单元测试覆盖率，完善的中英文文档和示例，支持按需引入，支持主题定制，支持国际化，支持 TS，支持 SSR。

# 通过 npm 安装npm i vant -S

Webpack并不是Vue独有的东西,而且Webpack的大名说不定比Vue本身还响亮。Github上各大主流的项目，无一例外都已经是基于webpack来开发。你可以不打算将其用在你的项目上，但没有理由不去掌握它。篇幅有限，不展开描述，一句话概括webpack的主要用途：把所有浏览器端需要发布的资源做相应的准备，完成资源的合并和打包。四个核心概念：

入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
loader：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件(plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

介绍完前端我们需要掌握的技术栈，接下来要聊聊作为炙手可热的全栈工程师来说，还有哪些知识是需要我们必须掌握的：

Node.js 给很多初学者的第一印象就是“可以在服务器上运行 JavaScript”，于是很多人就有这种疑问：“我写的是前端代码，又不是后端，我学Node.js干嘛啊”。

如今的前端已经不是零几年的前端了，以前我们写的是 Web Page，我们写出来的页面是给人“看”的；而现在我们写的是 Web App，我们写出来的应用是给别人“用”的。而两者的复杂度也不可同日而语。

在服务器端，JavaScript不依赖浏览器，而是由特定的运行环境提供的JavaScript引擎解析执行，比如Node.js。服务器端的JavaScript不操作DOM和BOM，它常常用来做一些在客户端做不到的事情，例如操作数据库、操作文件等。另外，在客户端的Ajax操作只能发送请求，而接收请求和做出响应的操作就需要服务器端的JavaScript来完成。

所以哪怕你只想做一个前端er，Node.js也是一项必须要掌握的技能。

Koa2是现在最流行的基于Node.js平台的web开发框架，它很小，但扩展性很强。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。一个Koa应用就是一个对象，包含了一个middleware数组，这个数组由一组Generator函数组成。这些函数负责对HTTP请求进行各种加工，比如生成缓存、指定代理、请求重定向等等。这些中间件函数基于 request 请求以一个类似于栈的结构组成并依次执行。

MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。MongoDB最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

我们可以在Koa2中通过Mongoose对MongoDB进行便捷的对象模型操作。

总结

如果你的简历中有一个具备上述前后端技术栈并且能够上线的全栈项目的话，你还愁得不到面试机会吗？而且这种级别的项目在面试过程中，当面试官问你关于项目经验的问题的时候，你也可以足够从容的来应对。

本文由 https://www.023niu.com 整理发布,转载请保留出处，内容部分来自于互联网，如有侵权请联系我们删除。

相关热词搜索：Vue React Angular