3个用于前端开发的最佳JavaScript框架/库 _框架

本文概述

React
Vue.js
Angular

多年来, JavaScript越来越流行, 社区迅速发展, 开发人员每天都在不断开发和构建用于该语言的工具。
在决定要用于特定任务的工具/框架/库时, 这使你不知所措, 因为你实际上想要在JavaScript中执行的所有操作都有多个选项。首先, 决定学习哪种库或框架仍然是一项挑战。
本文着重于揭开使用多个JavaScript前端框架/库的优势的神秘面纱, 并最终对它们进行更清晰的描述。目的是使选择一个的决策过程更加容易。
React

文章图片
React不是一个框架, 而是一个用于构建用户界面的JavaScript库。
它是开源的, 由Facebook和个人开发者社区维护。 React最初是由Jordan Walke在Facebook上作为内部工具编写的。它后来是开源的, 并于2013年向公众发布, 此后便获得了广泛的欢迎。
其中一些功能包括以下内容。

提供可响应, 可自定义和可重用的组件
利用虚拟DOM
极快
基于组件
单向数据绑定
代码可重用性
它背后有一个生机勃勃的生态系统
方便的状态管理

安装/使用
React可以两种不同的方式用于前端。

通过CDN
使用Node.JS

通过CDN
你可以参考他们的官方网站以获取脚本链接, 你可以将其包含在HTML标记的标头标记中。根据目的选择链接。
例如, 如果在开发环境中使用, 则：

< script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"> < /script> < script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"> < /script>

并且, 用于生产

< script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"> < /script> < script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"> < /script>

使用Node.JS
我假设你已经安装了NodeJS。要安装React, 只需键入以下命令。
须藤npm我-g create-react-app – save-dev
【3个用于前端开发的最佳JavaScript框架/库】安装完成后, 键入以下命令
创建React应用程序我的第一个React应用程序
上面的命令将安装React正常运行所需的所有必需库, 其中包括开发服务器, webpack和babel。
导航到my-first-react-application文件夹并运行以下命令
asl开始
上面的代码将在端口3000上启动开发服务器。然后, 当你使用端口3000访问服务器IP时, 应该会看到类似下面的内容。

文章图片
React正在受到许多大型组织的欢迎和需求。如果你对学习感兴趣, 那么我建议你修读完整的课程。
Vue.js

文章图片
Vue.js是一个渐进式JavaScript框架, 用于构建交互式用户界面和单页应用程序。这是一个带有核心库的模型视图框架, 专注于视图层。 Vue之所以受欢迎, 是因为它具有驱动单页应用程序的能力。与React不同, Vue使用原始HTML而不是JSX。
Vue.js是开源的, 最初由Evan You创建并于2014年2月公开发布。以下是其中的一些功能。

它提供了可响应的可组合视图组件。
利用虚拟DOM
专注于核心库(即路由和状态管理)
CSS中的作用域处理无需CSS-In-Js
组件内的单向绑定。
支持基本插件
代码可重用性

安装/使用
你可以通过CDN或与Node.js一起在前端使用Vue.js
要使用CDN方式, 可以将以下脚本添加到HTML页面标题部分。

< script src="http://img.readke.com/220515/1022456054-7.jpg"> < /script>

上面的脚本包含重要的控制台消息, 适合用于开发目的。但是, 对于生产, 你应该使用以下之一。

< script src="http://img.readke.com/220515/1022454113-8.jpg"> < /script>

并且, 要与Nodejs一起使用, 可以使用npm命令安装它。

npm install vue

我强烈建议你阅读Vue JS官方文档以了解更多信息或考虑采用此方法。
Angular

文章图片
Angular是用于动态页面的结构化JavaScript框架。它允许将HTML用作模板语言, 并允许使用HTML语法来清晰, 简洁地表达应用程序组件。这是一个由Google和其他贡献者维护的开源项目。
安装
确保你已安装最新的Node.js。我们需要安装的第一件事是Angular CLI工具。
npm install -g @ angular / cli
安装后, 我们可以使用以下命令创建一个新项目。

ng new my-first-angular-app

按照屏幕上的说明进行操作。这将生成一些文件和文件夹, 并使用npm模块下载Angular正常运行所需的第三方库。
要启动新创建的应用程序, 请从apps文件夹中运行以下命令。

ng server

这将自动在端口4200上启动服务器。

[[email protected] my-first-angular-app]# ng serve 10% building 3/3 modules 0 active? ?wds?: Project is running at http://localhost:4200/webpack-dev-server/ ? ?wds?: webpack output is served from / ? ?wds?: 404s will fallback to //index.htmlchunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered] Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ? ?wdm?: Compiled successfully.

总结
因此, 你选择学习的东西更多的是个人喜好, 而不是” 这是更好的” 东西。
上面列出的所有框架/库都很棒。这是一个简短的回顾；