当前位置:首页 » 网页前端 » Vs前端开发
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

Vs前端开发

发布时间: 2023-06-07 11:02:19

A. 前端为什么选择 vs code

理由很简单:
开源,免费,颜值高;
微软出品,实力保证。
然而用了一阵发现还是 Sublime 好用,一是刚出来功能不完善,Sublime 一些技巧无法迁移过来,另外就是插件太少,实际开发略显吃力。然随着后面 VSC 一次次更新,不少新 features 着实让人眼前一亮:微软这是在用心做产品呐!以至于现在已经没有什么可以抱怨的了(有趣的是当天尤大也发微博说转投 VSC 了,可以预见这款产品未来会越做越好,方向选对了,就不怕路走错)。

而作为前端,VSC 简直就是为其量身定制:

VSC 本身是基于当前大火的 TS 来写的,所以对于 TS 的支持自然很好;又是基于 electron 开发,底层 Node.js 对前端来说再熟悉不过了。所以,如果你发现哪里不好用,你可以自己写插件呐!如果一个满足不了,那就写两个。
而对于 VSC 的扩展开发也是相当友好,你只需要5步:
申请一个 Visual Studio Team Services Account;
添加一个 Personal access token;
创建一个发布账号,用来发布你的扩展即可(以上操作完全免费);
使用 VSC 的 Yeoman 脚手架初始化你的扩展项目,之后就是调用官方提供的 API 开发你的扩展即可,就跟开发 Chrome 插件一样;
使用官方发布工具vsce来发布你的扩展到扩展市场,之后别人就可以搜到你的扩展啦!
所以对于前端来说,都是我们熟悉的技术栈,你可以作为一个使用者,也可以转身变成一个开发贡献者!
而对于 Sublime 和 WebStorm 来说就没有这么方便了,当然你也可以用 Python 或者 Java 来贡献插件,不过对于前端还是稍稍有些门槛。如果仅仅是使用的话,WebStrom 确实也很好用,毕竟人家收了钱,而且你最好买一个高配的电脑,否则代码撸多了,会卡到你怀疑人生。

B. WEB前端VS后端,为什么要学习前端

相对来说大数据的难度大一些,前端前景是很不错的,像前端这样的专业还是一线城市比较好,师资力量跟得上、就业的薪资也是可观的,学习前端可以按照路线图的顺序,

0基础学习前端是没有问题的,关键是找到靠谱的前端培训机构,你可以深度了解机构的口碑情况,问问周围知道这家机构的人,除了口碑再了解机构的以下几方面:

1. 师资力量雄厚

要想有1+1>2的实际效果,很关键的一点是师资队伍,你接下来无论是找个工作还是工作中出任哪些的人物角色,都越来越爱你本身的技术专业前端技术性,也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师,一个好的前端培训机构必须具备雄厚的师资力量。

2. 就业保障完善

实现1+1>2效果的关键在于能够为你提供良好的发展平台,即能够为你提供良好的就业保障,让学员能够学到实在实在的知识,并向前端学员提供一对一的就业指导,确保学员找到自己的心理工作。

3. 学费性价比高

一个好的前端培训机构肯定能给你带来1+1>2的效果,如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作,你将获得比以往更多的投资。

希望你早日学有所成。

C. 你最喜欢用哪款前端开发工具为什么

前端开发最爽的地方就在于,一个编辑器,一个浏览器就足矣走天下。

编辑器——VSCode

前端开发利器,超级好用的编辑器,对于大前端来说更是不可多得。由微软出品,跨平台支持,颜值高,易上手,丰富的插件支持。下面推荐几个前端常用插件。

调试工具: 前端性能优化工具:

Yellow Lab Tools :一款Web性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。

DOM monster :你只需要添加到你的浏览器书签中,在任何需要调试的页面点击这个书签,它就能够帮助你列出目前页面出现的性能问题。

前端开发是目前一个非常火的行业,就业前景和薪资水平都非常不错,至于开发工具的话,那就非常多了,大部分代码编辑器、IDE环境都支持,下面我简单介绍4个非常不错的前端开发工具,感兴趣的朋友可以尝试一下:

01 代码编辑器

这是目前前端开发一个非常流行的开发工具,在业界非常受欢迎,免费、开源、跨平台,由微软自主研发,可以说是良心产品,常见的智能补全、代码高亮、语法提示等功能这个软件都能很好支持,除此之外,插件扩展非常丰富,可以很好的进行代码编辑和调试,轻巧灵活,运行速度快,对于前端开发来说,是一个非常不错的选择:

这也是一个比较轻巧灵活的代码编辑器,文本编辑功能强大,完美支持3大操作平台,但原则上不免费,和VS Code类似,Sublime Text也支持自动补全、语法提示、代码高亮等常见功能,除此之外,针对前段开发也提供了非常多的插件,不管是编辑还是调试代码来说,都非常方便,对于前端开发来说,也是一个不错的选择:

02 IDE环境

这是一个纯粹的国产Web IDE开发工具,目前在前端开发中也有着较高的使用率,常见的自动补全、代码高亮、语法提示、错误检查等功能这个软件都能很好兼容,除此之外,界面柔绿、清爽护眼,针对Vue专门打造了插件扩展,可以很好的提高开发效率,还支持安卓、iOS打包,对于前端开发来说,也是一个非常不错的工具:

这是一个非常专业的Web IDE开发工具,Jetbrains公司的产品,被誉为“Web前端开发神器”、“最智能的JavaScript IDE”,除了基本的智能补全、代码高亮、语法提示等常见功能,这个软件还支持代码分析与重构、 联想查询、 单元测试等高级功能,因此在开发效率上更高,也更适合大型项目,对于多人协作的前端开发来说,是一个非常不错的选择:

WebStorm

和idea同属于jetbrains公司开发的,它是旗下一款JavaScript开发工具,被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。

早起作为一个插件可以集成与Eclipse中来开发前端,现在已经独立出来,也是我最早接触js所使用的一款开发工具,如果熟悉了Eclipse快捷键的童鞋可以快速上手。


一款代码编辑器,借助丰富的插件资源,可以扩展成强大的前端开发工具,和IDE相比,属于一款轻量级的,启动特别快。


Atom

作为开源老大哥GitHub出的一款代码编辑器,和上面那个比较而言,插件略少,但和GitHub无缝结合,尤其是markdown编写,界面也很漂亮。

TextMate是Mac下的着名的文本编辑器软件,与BBedit一起并称苹果机上的emacs和vim。尤其适合程序员使用,可以定制许多贴心使用的功能。



Emacs即Editor MACroS(宏编辑器),是一种强大的文本编辑器。Emacs使用了Emacs Lisp这种有着极强扩展性的编程语言(它的核心是一个Emacs Lisp解释器),并实现了文本编辑支持等的扩展。

Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8 技术)。

VSC-VSCode

轻量快速,高颜值,社区开源,丰富扩展,微软支持

还有超好用的远程开发(vscode remote)和协作(live share)支持

HTML通常会和JavaScript、CSS同时出现。三者均是前端开发最常用到的。目前最常用到的HTML其实就是HTML5。常用的前端编程软件有HBuilder、Sublime Text等等。

HBuilder是一款免费的国产前端开发工具,编者用的就是HBuilder,对于小白和英语不太好的前端开发者这是一款难得的IDE。对代码自动补全方面简直是强大到没朋友。强力推荐。

Sublime Text是一个轻量级的编辑器,不端支持前端的html,js,css。还支持觉得多数的后端语言,比如C语言、java、python等。sublime text的强大之处是支持各种插件而且快捷键非常好用,可以极大的提高开发效率。缺点是代码提示方面不如Hbuilder。

很高兴能回答你的问题,作为一个后端开发,也曾经开发过前端,也用过很多前端开发工具。

1.sublime text用着确实不错,但是代码开发提示不强,平时用着文本编辑器还是可以的。

2.hbuild+用了一段时间各种不适用,最后就卸载了。

3.vs code用着一段时间写vue,需要安装插件,而且提交代码用感觉不方便,把不想提交的最后提交了,导致代码冲突,也许是因为自己用不熟。

4.webstorm 推荐使用,代码智能提示,而且提交代码方便。

无论是Python、Java、javascript,当我们选择一款开发工具时,很多人都会首先想到jetbrain全家桶,Webstorm、IDEA、Pycharm....不得不说,jetbrain在开发工具方面真的是颇有心得、炉火纯青。

但是,如果做前端开发,我认为除了jetbrain的webstorm,还有很多选择,而其中我最为推荐的当属VS Code,下面就来介绍一下。

VS Code

微软在开发工具领域已经有了多年积淀,而VS Code有时微软结合了visual studio和其他开发工具,不断改进、优化推出的一款免费开发工具。

可以说VS Code是当下最为热门的开发工具之一,对比于eclipse、IDEA这些老牌开发工具,微软对于VS Code的改变更为大胆创新,已经处于领头羊的地位。每年微软开发者大会,都会对 VS Code进行大幅度的创新,经过多年的优化,VS Code已经让很多开发者爱不释手。

首先说一下它几个为人熟知的优点,

首先说一下轻量化,我觉得仅凭这一点,就足以让jetbrain全家桶汗颜。无论是webstorm、还是IDEA,最令人痛苦的就是打开过程,臃肿、漫长,加载工程项目和配置项需要多大几分钟,令人无法忍受。而VS Code则不同,它更像一个编辑器,能够秒级打开,速度堪比UE、notepad++这些文本编辑器。

其次说一下丰富插件,丰富的插件造就了VS Code完整的生态,“你想要的,这里都有”,无论是标签样式还是DEBUG或者功能增强,VS Code都有非常多热门的插件,使得你的开发效率大大提升,当然,前端需要的那些优质插件这里都有。

其实,让我转向VS Code并非上述这两点,而是 远程开发 。

我觉得这是微软大胆创新和引领者角色必然的产物,让很多其他开发工具很难望其项背。

有了VS Code远程开发功能,我们可以实时同步本地和服务器代码,不需要再去复杂的配置远程服务器,对于项目管理也非常方便。

WebStorm和PS

尤其PS,平时生活中也需要用到,挺方便的

喜欢用webstorm,atom和vs code,sublimetext都装了,几乎只用webstorm,atom界面是漂亮,也是我第一个下载安装的,装了各种插件,那时初学,感觉提示不全,还有就是插件安装了几个后开机明显变好慢,无奈下了webstorm,感觉很爽

Google PageSpeed Insights 可以为网站生成性能报告,它在移动设备和桌面设备上都是免费的。并且还给出了影响页面加载速度的原因,并为这些问题提供了解决方案。网站速度按照 100 分进行划分,其中:

2. Pingdom Website Speed Test

Pingdom Website Speed Test 可以全面分析影响页面Web速度的因素。此外,还可以查看网站在亚洲、欧洲等多个不同的地理位置的性能信息。

3. WebPagetest

WebPagetest是 AOL 开发的一款在线的免费性能评测网站,从全球多个地点运行免费网站速度测试。可以运行简单的测试或执行高级测试,包括多步骤事务、视频捕获、内容阻塞等等。还将依据测试结果提供丰富的诊断信息,包括资源加载瀑布图,页面速度优化检查和改进建议,会给每一项内容一个最终的评级。

4. GTmetrix

GTmetrix 是一个类似于 pingdom 的工具,可以快速轻松地测试网站速度。它主要有PageSpeed和YSlow两部分组成,并提供相应的得分数据,能够真实的反应出网站的性能,并且会提供可行性建议来帮助改善网站性能。

5. Keycdn Tool

Keycdn Tool 是一个在全球 10 不同地点的网站速度测试工具。它允许测试任何页面的性能。返回的结果将提供请求、内容大小和加载时间等详细信息。此外,还有一个完整的瀑布图,详细说明了每个资源的加载时间和 HTTP 头。

6. GiftOfSpeed

GiftofSpeed是一款免费网站载入速度测试工具,可以在上面获得网站综合性能信息,它能够展示网站加载时间以及评估网站有哪些需要改进的地方,并给予一个客观的综合评分。

GiftofSpeed 的测试结果以瀑布流展示,可以很容易看到网站加载速度,每一项资源的的载入顺序、大小与响应时间的长短,方便了解网站的各项载入资源。此外,它还提供了载入时间最长的内部文件以及外部文件,从而分析出是由哪些因素影响了你网站的载入速度,就可以专门针对这些载入时间较长的元素进行优化,从而最大限度提升网站载入速度。

7. Pagelocity

Pagelocity 是一个网站分析性能测试工具。这个工具也提供了追踪竞争对手的能力。代码检视图在类似工具中是独一无二的。如果想知道 TTFB 和图形化 DOM 元素等,都能通过这项工具获取到。

8. Sucuri Loadtime Tester

Sucuri Load Time Tester 是一个网站分析性能测试工具,它用不同的颜色表示网速快慢,可以很直观地看出测试网站在不同国家的运行速度。绿色表示畅通,没有颜色的普通数字表示一般,黄色表示中等偏慢,红色表示缓慢。

9. GEEKFLARE

GEEKFLARE 这是一套免费的性能测试工具,用于测试网站的 DNS、安全性、性能、网络和 SEO 等问题。

10. Dareboost

DareBoost 是一个免费网站速度测试和网站分析工具。它提供超过 100 种不同的检查项目用以分析你的网站的速度。可以测试桌面端与行动页面、Firefox 与 Chrome 和五个节点的速度差异。

D. 为什么我选择使用 VS Code进行前端开发

  1. 开源,免费,颜值高;

  2. 微软出品,实力保证(毕竟是有 VS 团队技术保障的)

E. Web前端 VS Web后端的结果是什么样的

没听说过web后端

F. vs2015可以开发web前端吗

可以,但是推荐还是使用webstorm。vs有点大材小用,而且15不清楚,像12就不支持html5新标签的语法。

G. 2021年的前端框架选择 Angular vs React vs Vue

每个前端开发人员都听说过三个用于构建 Web 应用程序的框架:React、Vue.js和Angular。

React 是一个 UI 库,Angular 是一个成熟的前端框架,而 Vue.js 是一个渐进式框架。

它们几乎可以互换使用来构建前端应用程序,但它们并非 100% 相同,因此比较它们并了解它们的差异是有意义的。

每个框架都是基于组件的,并允许快速创建 UI 功能。

然而,它们都有不同的结构和架构——所以首先,我们将研究它们的架构差异以了解它们背 后的哲学。

React 不强制执行特定的项目结构,正如您从下面的官方“Hello World”示例中看到的那样,您只需几行代码即可开始使用 React。

React 可以用作 UI 库来渲染元素,而无需强制执行特定的项目结构,这就是它不是严格意义上的框架的原因。

React Elements是 React 应用程序的最小构建块。它们比 DOM 元素更强大,因为 React DOM 确保在发生变化时有效地更新它们。

组件是更大的构建块,定义了在整个应用程序中使用的独立且可重用的部分。它们接受称为 props 的输入并生成元素,然后显示给用户。

React 基于 JavaScript,但它主要与JSX (JavaScript XML)结合,这是一种语法扩展,允许您创建同时包含 HTML 和 JavaScript 的元素。

您使用 JSX 创建的任何内容也可以使用 React JavaScript API 创建,但大多数开发人员更喜欢 JSX,因为它更直观。

Vue.js 核心库只关注视图层。之所以称为渐进式框架,是因为您可以使用官方和第三方包(例如Vue Router或Vuex )扩展其功能,将其转变为实际框架。

虽然 Vue 与 MVVM(Model-View-ViewModel)模式没有严格关联,但它的设计部分受到了它的启发。使用 Vue,您将主要在 ViewModel 层上工作,以确保以允许框架呈现最新视图的方式处理应用程序数据。

Vue 的模板语法让您可以创建 View 组件,并将熟悉的 HTML 与特殊指令和功能相结合。这种模板语法是首选,即使原始 JavaScript 和 JSX 也受支持。

Vue 中的组件很小,是自包含的,并且可以在整个应用程序中重复使用。带有扩展名的单文件组件(SFC).vue包含 HTML、CSS 和 JavaScript,因此所有相关代码都位于一个文件中。

SFC 是在 Vue.js 项目中组织代码的推荐方式,尤其是大型项目。需要使用 Webpack 或 Browserify 等工具将 SFC 转换为可用的 JavaScript 代码。

在本文中,我讨论的是 Angular 2,而不是现在称为 AngularJS 的框架的第一个版本。

AngularJS,原始框架,是一个MVC(模型-视图-控制器)框架。但是在Angular 2 中,与 MV*-patterns 没有严格的关联,因为它也是基于组件的。

Angular 中的项目被组织成模块、组件和服务。每个 Angular 应用程序至少有一个根组件和一个根模块。

Angular 中的每个组件都包含一个模板、一个定义应用程序逻辑的类和元数据(装饰器)。组件的元数据告诉 Angular 在哪里可以找到创建和呈现其视图所需的构建块。

Angular 模板是用 HTML 编写的,但也可以包含带有特殊指令的Angular 模板语法,以输出反应性数据和呈现多个元素等。

组件使用 Angular 中的服务来委托业务逻辑任务,例如获取数据或验证输入。它们是 Angular 应用程序的独特部分。虽然 Angular 不强制使用它们,但强烈建议将应用程序构建为一组可以重用的不同服务。

Angular 内置于 TypeScript 中,因此建议使用它以获得最无缝的体验,但也支持纯 JavaScript。

React 是最受欢迎的 JavaScript 项目之一,在 GitHub 上拥有 16 万颗星。它由 Facebook 开发和维护,并在他们的许多项目内部使用。此外,根据BuiltWith的使用统计数据,它为超过 200 万个网站提供支持。

在三个框架中,Vue在 GitHub上的 star 数最多,有 176k。该项目由前 Google 员工 Evan You 开发和领导。据BuiltWith 称,这是开源社区中一个非常强大的独立项目,被超过 100 万个网站使用。

Angular 是由 Google 开发的,但令人惊讶的是它并没有用于他们的一些旗舰产品,例如搜索或 Youtube。它经常用于企业项目,并基于BuiltWith的数据为超过 97,000 个网站提供支持。

它是三个框架中星数最少的,在 GitHub 上有 68k 星。然而,当从 Angular 1 切换到 Angular 2 时,他们创建了一个全新的代码库,而不是继续AngularJS项目,该项目也有 59k 星。

在开发应用程序时,开源包可以为您节省宝贵的时间。不仅如此,它们通常比定制组件和封装更好,因为它们经过了实战测试。

查看可帮助您更轻松地创建新功能的现成组件、主题和其他工具的可用性非常重要。

许多前端应用程序依赖全局状态管理来存储信息,例如谁登录和其他用户设置。

最流行的 JavaScript 状态管理项目是Rex。大多数开发人员使用Rex的官方 React 绑定,这些绑定由 Rex 团队维护。

由于 React 的流行,查找输入组件和现成的元素非常容易。它们都只是在 Google 或 GitHub 上搜索即可。

React 生态系统还包括React Native,它允许您从用 React 编写的单个代码库构建原生 iOS 和 Android 应用程序。因此,React 也可以成为使用 Web 技术构建移动应用程序的绝佳选择。

React 是 MERN 堆栈的一部分,其中包含 MongoDB、ExpressJS、React 和 NodeJS。这种组合的伟大之处在于,单一语言——JavaScript——为整个应用程序提供动力。

尽管 Rex 可以在 Vue 中使用,但没有官方绑定。但这不应该让您担心,因为Vuex是专门为 Vue 应用程序制作的官方状态管理库。除了与 Vue 很好地集成之外,使用 Vue 的开发人员工具进行调试也很容易。

在 Vue 的早期,很难找到现成的组件。随着社区的发展,您可以使用各种输入组件和高级元素来加快开发速度。

对于移动应用程序开发,有一个名为Weex 的新兴项目。Weex 由阿里巴巴开发和使用,但不如 React Native 成熟和强大。更重要的是,由于该项目在中国开发和使用较多,因此很难找到英文文档和解决问题的方法。

Vue 与 Laravel 集成得很好,这就是为什么它们经常一起使用。Laravel 提供完整的JavaScript 和 CSS 脚手架,以支持在新项目中使用 Vue。

对于 Angular 中的状态管理,您可以使用NgRx项目。它的灵感来自 Rex,但它是专门为 Angular 创建的。

与 Vue 和 React 的情况一样,您可以将许多现成的组件导入到您的项目中。与 Angular 略有不同的是,Angular Material项目中有许多官方组件。这是 Google 的一个官方项目,为 Angular 应用程序提供 Material Design 组件。

您可以使用NativeScript在 Angular 中构建跨平台移动应用程序。它也支持 Vue,但 Angular 支持更成熟。

Angular 是着名的 MEAN 堆栈的一部分,它将 Angular 与 MongoDB、ExpressJS 和 NodeJS 相结合。与 MERN 堆栈类似,它的前端和后端都完全依赖 JavaScript。

Angular、React 和 Vue 都可用于开发渐进式 Web 应用程序,也称为 PWA。

PWA 不是移动应用程序,而是 Web 应用程序,智能手机用户可以将其添加为主屏幕的快捷方式,并提供类似于原生移动应用程序的外观和感觉。

您还可以为每个框架找到高级模板和预制应用程序,但 Angular 和 React 比 Vue 提供更多高级选项。

在选择框架或库时,您还需要考虑性能。

在许多情况下,您不必担心性能,尤其是在构建小型项目时。然而,项目的范围和复杂性越大,性能就会(并且将会)成为一个问题。

重要的是要注意,在 Web 性能方面,开发质量和遵循最佳实践比框架的选择更重要。

但由于存在一些性能指标和差异,我将研究它们并解释每个指标如何影响您的开发工作。

JS 框架基准测试的结果表明,它们在大多数基准测试中都表现得相当好,例如在表中创建或附加行。

正如你在上面看到的,Vue 在选择行时比 Angular 和 React 慢得多。另一方面,Angular 和 React 在交换行方面效率不高。

这些是渲染基准中唯一的实质性差异 - 在大多数情况下,不会产生明显的结果。由于选择行是比交换行更常见的功能,我想说这个基准测试将 Vue 排在第三位,仅次于 Angular 和 React 并列第一。

在内存和启动时间方面,React 和 Vue 得分很好,但 Angular 稍慢。Angular 启动一个基本脚本可能需要 150 毫秒,并且需要更多内存才能运行。

谷歌 Chrome 实验室的Perf Track显示了来自数千个网站的生产数据。这些统计数据受许多其他因素的影响,而不仅仅是选择的框架,让我们看看数字。

与 Angular 相比,Vue 和 React 网站在这个指标上的排名更高,Angular 需要更多时间来启动并向用户呈现内容。

在渲染完整页面的三个框架中,Angular 也是最慢的,只有 27% 的 Angular 网站得分在可接受的范围内。

对于所有三个框架,超过 80% 的网站都在第一次输入延迟的可接受范围内,这显示了用户可以与页面交互所需的时间。

迄今为止,最轻量级的应用程序是使用 Vue 开发的应用程序,68% 的 Vue 应用程序加载的 JavaScript 不到 1MB。另一方面,Angular 和 React 应用程序往往具有更大的代码大小。

您可以从这些数字中看到趋势,但您不应该太快得出结论。例如,对于最后一张图,可以解释为 Vue 用于开发更轻量级的应用程序,而 Angular 用于更大的项目。

统计数据可以帮助指导您做出正确的决定,但您不能使用它们来证明一个框架比另一个更快或更好。

对于更高级的应用程序,使用的前端框架应该能够执行一些提高性能并且可以更好地扩展的任务。

两项关键技术是服务器端渲染 (SSR) 和虚拟化。

React 支持使用官方ReactDOMServer包进行服务器端渲染。对于虚拟化,您可以使用名为React Virtualized的流行第三方工具。

Vue 中也支持服务器端渲染以及官方的SSR 包。此外,您还可以使用基于 Vue 构建并支持 SSR的Nuxt.js框架。

不幸的是,Vue 中的虚拟化选项并不是那么强大。在我看来,Vue Virtual Scroll List是虚拟滚动的最佳解决方案,但它有点问题,不如 React 和 Angular 的选项稳定。

Angular 拥有SSR的官方Angular Universal包,以及用于虚拟滚动和高效渲染大型列表的官方组件。

学习这些框架有多容易?

要回答这个问题,我们需要查看每个框架的复杂性及其引入的概念。

在最基本的用例中,React 是三个框架中最不复杂的。那是因为你只需要导入库,然后你就可以用几行代码开始编写你的 React 应用程序。

但是除了 Hello World 示例之外,大多数 React 应用程序都是基于组件的,而不仅仅是在页面上呈现一些元素。

一些开发人员对 React 感到奇怪或困难的一件事是,学习 JSX 是一条单行道。您也可以使用原始 JavaScript,但由于大多数 React 开发人员使用 JSX,学习它几乎是不可避免的。

这是使 React 的学习曲线变得更陡峭的主要因素,但除此之外,对于了解 JavaScript 并理解 Web 开发概念的开发人员来说,它是一个易于学习的库。

Vue 的设置比 React 稍微复杂一些。你可以将它用作一个库来定义你可以在整个 HTML 中使用的组件——但与 React 类似,这不是大多数项目的构建方式。

大多数 Vue 项目都有一个命名的根组件App.vue和一些用于显示各种内容的子组件。

说到语法,你唯一需要学习的新东西就是 Vue 的模板语法,如果你了解 HTML,这很容易掌握。基本的指令,如v-if和v-for有条件的渲染和列表的渲染,很容易理解即使是初学者。

此外,Vue 的单文件组件将所有前端代码保存在一个地方,便于组织新项目。

在我看来,Vue 是最容易学习的,因为它的简单和直观的语法。

Angular 拥有三者中最复杂的项目结构,而且由于它是一个成熟的前端框架,因此它依赖的概念更多。

除了组件,Angular 还支持模块和服务。它希望您以特定的方式编写和设计代码库,从而使您的项目在扩展时更易于维护。

至于语法,由于 Angular 最适合与 TypeScript 配合使用,因此在构建 Angular 项目时了解 TypeScript 非常重要。

与 Vue 一样,您还必须熟悉类似 HTML 的语法,以便您可以开始使用 Angular 编写新的 UI 功能。

在我看来,Angular 对于普通开发者来说是最难学的,因为它更复杂并且依赖于 TypeScript。

许多开源项目和框架逐渐被遗忘并无人维护。您是否应该担心我们在这里讨论的任何框架?

尽管我们无法完全预测会发生什么,但正在进行的开发工作是这些项目 健康 状况的良好指标。人气和增长也是预测项目寿命的重要指标,所以让我们来看看每个框架。

React v17.0已经发布,但令人惊讶的是,它没有为开发人员提供任何新功能。

主要的变化是这个新版本可以更容易地升级 React 本身。您可以将 React 的某些部分从旧版本升级到新版本,而无需升级整个项目。

如果您的应用程序依赖于随新版本更改或弃用的功能,您可以保留旧版本以保持此功能有效。此更新使 React 成为一个很好的长期选择,因为它可以更轻松地与新版本保持同步。

React 的每周 npm 下载量自去年以来增长了 44% 。从绝对数量来看,它仍然是三个项目中下载量最大的。

Vue 3 已于2020 年 9 月发布,它解决了 Vue 2 在大型项目中存在的许多严重问题。它引入了受React Hooks启发的Composition API,可以更轻松地跨组件重用逻辑。

整个项目用 TypeScript 重写,提高了新 Vue 项目对 TypeScript 的支持,同时也使项目更易于维护。

Vue 3 是一个急需的升级,使 Vue 更适合大型项目。

Vue 的每周下载量自去年以来增长了 87%,使 Vue 成为相对而言增长最快的框架。如果 Vue 能够保持这种增长速度,那么它肯定会很快超过 Angular。

Angular 最近推出了Ivy 编译器。它减少了构建时间,优化了资产,允许更快的测试,并总体上改善了开发人员的体验。

Angular 团队每年发布两次重大更新,其中可能包含新功能,或者只是让框架跟上新浏览器版本的速度。

自去年以来,Angular 的每周下载量增长了约 50% ,因此它仍然是一个受欢迎的项目。

Angular、React 和 Vue 都处于非常活跃的开发阶段。他们定期发布新版本并维护现有版本。由于在每种情况下当前的支持水平都很高,因此您可以安全地使用这些框架中的任何一个。

需要注意的是,Angular 的增长没有以前那么快,而 Vue—— 尽管它是最近开始的——似乎增长了很多。

如前所述,我们无法预测哪些框架会长期保持相关性,但每个项目背后都有一个伟大的社区,并且在不断发展。

我这篇文章的目标是解释架构差异,分解每个框架的优点和缺点,并在适用的地方进行比较。

在进入一个新框架之前,有几件事情需要考虑。

首先,在选择新技术时,您团队的经验可能是一个决定性因素。

同样,您必须考虑您所在地区可用的人才,以便您可以为您的项目聘请开发人员。

最后,当涉及到项目本身时,复杂性和范围也会影响您对框架的选择。

通过考虑所有关键差异,我希望您可以决定哪个是最适合您的目标和需求的前端框架。

(本文由闻数起舞翻译自Aris Pattakos的文章《Angular vs React vs Vue 2021》,转载请注明出处,原文链接:https://athemes.com/guides/angular-vs-react-vs-vue/)