angular vs react vs vue入门

The only way to learn a new programming language is by writing programs in it.

学习一种新的编程语言的唯一方法是用它编写程序。

― Dennis Ritchie

―丹尼斯·里奇

表中的内容(Table of Content)

1. Introduction

   介绍

2. History2.1 Angular2.2 React
   2.3 Vue

   历史2.1角度2.2React2.3 Vue

3. Requirements & Installation Process 3.1 Angular
   3.2 React
   3.3 Vue

   要求和安装过程 3.1角度3.2React3.3 Vue

4. Conclusion

   结论

介绍(Introduction)

As we all know, Javascript is the heart and soul of frontend web development. To build complex web applications, using vanilla javascript is probably not the right choice as you may end up pulling the hair out of your head.

众所周知，JavaScript是前端Web开发的心脏和灵魂。 要构建复杂的Web应用程序，使用香草javascript可能不是正确的选择，因为您最终可能会将头发拔出头来。

To make things easier and product development faster, a library like jQuery was introduced in 2006.

为了使事情变得更容易并且产品开发更快，2006年引入了像j Query这样的库。

Later on, in 2010 Angular js was created by Google. It became the first framework that provided a complete architecture for front-end application development.

后来，在2010年，谷歌创建了一个ngular js。 它成为第一个为前端应用程序开发提供完整体系结构的框架。

Fast forward to today, and we have the big 3 that dominate the world of frontend web development ( Angular, React, and Vue)

快进到今天，我们拥有主导前端Web开发世界的三巨头( Angular，React和Vue )

Each of these tools is unique and can perform the same function effectively. One fact that cannot be ignored is that there will always be a debate about which is better among the three, but in this article, our focus is on how to set them up on our machine.

这些工具中的每一个都是唯一的，并且可以有效地执行相同的功能。 一个不容忽视的事实是，始终存在关于这三个中哪个更好的争论，但是在本文中，我们的重点是如何在我们的计算机上进行设置。

历史 (History)

角度的(Angular)

Initially released by Google on 14th September 2016. It is completely different from Angular Js which was created years earlier by the Google team. Angular was created to serve as an alternative to Angular Js which has been placed on long-term support until December 31, 2021.

最初由Google在2016年9月14日发布。它与Google团队几年前创建的A ngular Js完全不同。 角被创建以用作所述的ngular的js替代已经放置在长期支持，直到2021年12月31。

Angular is written in Typescript, which is a superset of Javascript. The Angular team is committed to making a major release once every 6 months.

Angular用Typescript编写，它是Javascript的超集。 Angular团队致力于每6个月发布一次重要版本。

As of today, the latest release is version 10 which was released June 24, 2020.

截至今天，最新版本是2020年6月24日发布的版本10。

ReactJs (React Js)

Initially released on May 29, 2013, it is maintained by Facebook and a community of developers.

最初于2013年5月29日发布，由Facebook和开发者社区维护。

React is written in Javascript and it is regarded as the most popular and widely used between Angular and Vue.

React是用Javascript编写的，被认为是Angular和Vue之间最受欢迎和广泛使用的。

The current stable version is 16.13.1, released on March 19, 2020.

当前稳定版本是16.13.1，于2020年3月19日发布。

Vue.js (Vue.js)

Also called Vue is also an open-source JavaScript library just like React. It makes use of the model-view-viewmodel structure.

就像R eact一样，也称为Vue也是一个开源JavaScript库。 它利用了model-view-viewmodel结构。

Vue Js is written in Javascript. The current stable release is on August 20, 2020.

Vue Js用Java语言编写。 当前的稳定版本于2020年8月20日。

要求和安装过程 (Requirements & Installation Process)

角度(ANGULAR)

We are going to install and run the Angular application in 4 easy steps:

我们将通过4个简单的步骤来安装和运行Angular应用程序：

步骤1：下载Node.js (Step 1: Download Node.js)

To use Angular, the first step is to install Node.js. Node.js is an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

要使用Angular，第一步是安装Node.js。 Node.js是异步事件驱动JavaScript运行时，Node.js旨在构建可扩展的网络应用程序。

The installation of Node comes along with NPM(Node Package Manager). NPM is the tool we will be using in the terminal to install other 3rd party libraries needed to run an Angular application.

Node的安装与NPM (Node Package Manager)一起提供。 NPM是我们将在终端中使用的工具，用于安装运行Angular应用程序所需的其他第三方库。

If you don’t have Node.js installed on your machine, you can do that here

如果您的计算机上未安装Node.js，则可以在此处进行操作

步骤2：安装Angular CLI(Step 2: Install The Angular CLI)

Once Node.js has been installed on your machine, this stage involves installing the Angular CLI. We can do this by opening the terminal and running the command below:

在您的计算机上安装Node.js之后，此阶段涉及安装Angular CLI。 我们可以通过打开终端并运行以下命令来做到这一点：

npm install -g @angular/cli

Once the installation process is complete, you can type ng v in the terminal to confirm if it was successfully installed. That command will display the version of Angular you have running on your machine.

安装过程完成后，您可以在终端中键入ng v来确认安装是否成功。 该命令将显示您在计算机上运行的Angular版本。

步骤3：建立新的Angular专案 (Step 3: Create a New Angular Project)

Now that the Angular CLI has been installed, we now have access to the ng command in our terminal.

现在已经安装了Angular CLI，现在我们可以在终端中访问ng命令了。

To create a new project we can run the command below:

要创建一个新项目，我们可以运行以下命令：

ng new my-first-project

Once the installation process is complete and the needed dependencies and files downloaded, the next thing to do is to navigate into the project directory. We can do this by running the cd my-first-project command in the terminal.

安装过程完成并下载了所需的依赖项和文件后，下一步是导航到项目目录。 我们可以通过在终端运行cd my-first-project命令来做到这一点。

步骤4：运行应用程序 (Step 4: Run The Application)

To run the application and display it on the browser, we will run another command from the terminal, shown below:

要运行该应用程序并将其显示在浏览器中，我们将从终端运行另一个命令，如下所示：

ng serve --open

Once this command has executed successfully, a tab should open in the browser showing the Angular boilerplate template

成功执行此命令后，应在浏览器中打开一个标签，显示Angular样板模板

We just successfully run an Angular application. By default, our application will be running on localhost:4200

我们刚刚成功运行了Angular应用程序。 默认情况下，我们的应用程序将在localhost：4200上运行

加成(Addition)

To prepare and bundle our app for production, we can run the ng build -prod command in the terminal. This will minimise and bundle our application making it ready for deployment.

为了准备和捆绑我们的应用程序以进行生产，我们可以在终端中运行ng build -prod命令。 这将最小化并捆绑我们的应用程序，使其可以进行部署。

REACT.JS (REACT.JS)

We will work on two different ways of setting up a React project. The first one will be done using the create-react-app command, and the second one will be set up using Webpack and Babel.

我们将以两种不同的方式来建立一个React项目。 第一个将使用create-react-app命令完成，第二个将使用Webpack和Babel进行设置。

使用create-react-app命令 (Using The create-react-app Command)

This will be done in two(2) easy steps.

这将通过两(2)个简单步骤完成。

步骤1：安装create-react-app (Step 1: Install create-react-app)

To have access to the create-react-app command, we need to install it on the terminal using npm. The command to that is shown below:

要访问create-react-app命令，我们需要使用npm将其安装在终端上。 该命令如下所示：

npm i create-react-app

步骤2：使用NPX创建项目 (Step 2: Create Project With NPX)

We can now create a new project using npx. npx is a package runner tool that comes with npm version 5.2 and above. It allows us to create a new React project from the terminal by running the command below:

现在，我们可以使用npx创建一个新项目。 npx是npm 5.2及更高版本随附的打包运行程序工具。 它允许我们通过运行以下命令从终端创建一个新的React项目：

npx create-react-app my-first-app cd my-first-app npm start

Above we created a new project called my-first-app , we moved into the newly created project directory and started the project with npm.

在上面，我们创建了一个名为my-first-app的新项目，我们进入了新创建的项目目录，并使用npm启动了该项目。

By default, our project will be running on localhost:3000 in the browser. To prepare and bundle our app for production, we can run the npm run build command in the terminal.

默认情况下，我们的项目将在浏览器中的localhost：3000上运行。 为了准备和捆绑我们的应用程序以进行生产，我们可以在终端中运行npm run build命令。

使用Webpack和Babel (Using Webpack and Babel)

This involves a much longer process to run React. It will be done in 7 steps.

这需要更长的时间来运行React。 这将分7个步骤完成。

步骤1：创建项目文件夹 (Step 1: Create The Project Folder)

To install React using this method, we will create a new folder to install all the required dependencies. We can do this with the command below:

要使用此方法安装React，我们将创建一个新文件夹来安装所有必需的依赖项。 我们可以使用以下命令执行此操作：

C:\Users\user> mkdir my-first-react-app C:\Users\user> cd my-first-react-app

步骤2：package.json (Step 2: package.json)

To install any dependencies, a package.json file is required to be installed in the project. To do this, we will run the npm init command in our project directory, from the terminal.

要安装任何依赖项，需要在项目中安装package.json文件。 为此，我们将从终端在项目目录中运行npm init命令。

C:\Users\user\my-first-react-app> npm init

The above command will require some information like the name, author, description version etc. to be filled in the terminal. A sample of this can be found below:

上面的命令将需要在终端中填写一些信息，例如名称，作者，描述版本等。 可以在下面找到一个示例：

You can skip filling all the data above by adding a -y flag to the npm init command.

您可以通过向npm init命令添加-y标志来跳过填充以上所有数据。

第三步：安装React和React Dom (Step 3: Install React and React Dom)

So for React to work on our project, we need to install React and React Dom. To do this, we will run the command below:

因此，为了使React能够在我们的项目上工作，我们需要安装React和React Dom。 为此，我们将运行以下命令：

C:\Users\user\my-first-react-app> npm install react C:\Users\user\my-first-react-app> npm install react-dom

步骤4：安装Webpack和Babel (Step 4: Install Webpack and Babel)

Let’s start with Webpack. Webpack is going to require three things to be installed.

让我们从Webpack开始。 Webpack将需要安装三件东西。

C:\Users\user\my-first-react-app>npm install webpack webpack-dev-server webpack-cli --save

Next up to install is Babel. Some of the Babel dependencies we are going to install include:

接下来要安装的是Babel。 我们将要安装的一些Babel依赖项包括：

• babel preset env — This package allows the compiling modern Javascript down to ES5.

  babel预设环境-该软件包允许编译现代Javascript直至ES5。

• babel preset react — This package allows the compiling JSX down to Javascript

  babel预设react —此软件包允许将JSX编译为Javascript

• babel-loader — This package allows transpiling JavaScript files using Babel and Webpack.

  babel- loader-此软件包允许使用Babel和Webpack转换JavaScript文件。

• babel-core — Gives us access to the Node API.

  babel-core-使我们可以访问Node API。

Now let us install them by running the command below:

现在，让我们通过运行以下命令来安装它们：

C:\Users\user\my-first-react-app>

Babel is now installed!

Babel现在已安装！

步骤5：创建所有必需文件 (Step 5: Create All Necessary Files)

We need to create the files needed for us to set up and bootstrap the application. These files are going to be created in the root folder (my-first-react-app ) of the application. They include:

我们需要创建设置和引导应用程序所需的文件。 这些文件将在应用程序的根文件夹(my-first-react-app )中创建。 它们包括：

步骤6：配置规则，加载程序和开发服务器 (Step 6: Configure Rules, Loaders, and Dev Servers)

Next step is to open up the files and complete the setup. We start with the index.html file.

下一步是打开文件并完成设置。 我们从index.html文件开始。

index.html

index.html

<!DOCTYPE html> <html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>My First App</title> 
</head> 
 <body> 
  <div id="app">
  </div> 
 </body> 
</html>

The important thing to take note of in our index.html file is the div with the id called app.

在我们的index.html文件中要注意的重要事情是ID为app的div 。

App.js

App.js

import React, { Component } from 'react'; 
class App extends Component{ 
 render(){
 return( <h1>Hello World</h1> ); 
}}
 export default App;

This is the part of our code that will be shown in the browser. When we eventually run the application, we should see a Hello world text.

这是我们代码的一部分，将在浏览器中显示。 当最终运行该应用程序时，我们应该看到Hello world文本。

index.js

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.js'; 
ReactDOM.render(<App />, document.getElementById('app'));

The App.js is imported into the index.js file, this enables us to render it into the browser.

App.js导入到index.js文件中，这使我们能够将其呈现到浏览器中。

webpack.config.js

webpack.config.js

const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), 
filename: 'index_bundle.js', publicPath: '/' }, 
module: { rules: [ { test: /\.(js)$/, use: 'babel-loader' }, 
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} ]},
 
mode: process.env.NODE === 'production' ? 'production' : 'development', 
plugins: [ new HtmlWebpackPlugin({ template: './index.html' }) ],
devServer: { historyApiFallback: true } }

From the above code, we set the entry point of the application as index.js. Then the output path is where we will bundle the app for production. This will be done inside the dist folder.

从上面的代码，我们将应用程序的入口设置为index.js。 然后，输出路径是我们将应用捆绑生产的地方。 这将在dist文件夹中完成。

In the mode object, we can either set the app to be bundled for either production or development mode. This will be done in the package.json file

在mode对象中，我们可以将应用程序设置为捆绑用于生产或开发模式。 这将在package.json文件中完成

第7步：设置package.json文件(Step 7: Setup package.json File)

"scripts": {
    "start": "webpack-dev-server",
    "build-for-windows": "SET NODE_ENV='development' && webpack"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/syntax-dynamic-import"
    ]
  }

On opening the package.json file, you may come across “test” “echo \”Error: no test specified\” && exit 1″ inside the scripts object. You should clear it off and post the above code in the scripts object.

打开package.json文件时，您可能会在脚本对象内部遇到“测试”“ echo \”错误：未指定测试\”和＆退出1” 。 您应该清除它，并将上面的代码发布到scripts对象中。

Now inside the root of our application, we can start our application with the command below, like so:

现在，在应用程序的根目录下，我们可以使用以下命令启动应用程序，如下所示：

C:\Users\user\my-first-react-app>npm start

The app will run on http://localhost:8080 by default. If we go to this address on the browser, we should see Hello World on display.

默认情况下，该应用程序将在http：// localhost：8080上运行。 如果在浏览器上转到该地址，则应该在屏幕上看到Hello World 。

To generate the bundle needed for deployment, we can run the command below in the terminal.

为了生成部署所需的捆绑包，我们可以在终端中运行以下命令。

C:\Users\user\my-first-react-app>npm run build-for-windows

So that is how React can be created using Babel and Webpack.

这样便可以使用Babel和Webpack创建React 。

VUE.JS (VUE.JS)

We will be setting up Vue with the Vue CLI. This will be done using yarn in 3 easy steps.

我们将建立Vue公司与Vue的CLI。 这将通过3个简单的步骤使用纱线完成。

Note: In case you don’t have yarn installed on your machine, you can install it with npm by running the npm i yarn command.

注：如果您没有在机器上安装纱做的，你可以通过运行NPM我纱命令NPM安装。

步骤1：安装Vue CLI (Step 1: Install The Vue CLI)

We do this by running the command below:

我们通过运行以下命令来执行此操作：

yarn install -g vue-cli

With this, we have installed Vue globally on our machine.

这样，我们就在机器上全局安装了Vue 。

步骤2：建立新的Vue专案 (Step 2: Create a New Vue Project)

To complete this step we run the command below:

要完成此步骤，我们运行以下命令：

vue create first-vue-app

This will show the options below in the terminal.

这将在终端中显示以下选项。

Vue CLI v4.5.6 Please pick a preset: (Use arrow keys) 
> default (babel, eslint) 
Manually select features

To keep things at a basic level, we can select the default option.

为了使事情基本保持不变，我们可以选择默认选项。

步骤3：运行Vue应用 (Step 3: Run Vue App)

To run the application, we need to move into the project directory which is first-vue-app with the command below:

要运行该应用程序，我们需要使用以下命令进入“ first-vue-app ”项目目录：

cd first-vue-app yarn serve

Now, the project will become accessible at http://localhost:8080/ by default in your browser!

现在，该项目将可以在http：// localhost：8080 /访问。 默认情况下在您的浏览器中！

结论 (Conclusion)

So that is pretty much everything that is needed to set up an Angular, React or Vue application. If you have any issue during the installation process, please feel free to drop a comment, I will be sure to respond to it.

因此，这几乎是设置Angular， React或Vue应用程序所需的一切。 如果您在安装过程中遇到任何问题，请随时发表评论，我一定会对此做出回应。

Also, you can subscribe to my newsletter

另外，您可以订阅我的新闻通讯

Originally published at https://thecodeangle.com on September 13, 2020.

最初于2020年9月13日发布在https://thecodeangle.com 。

翻译自: https://medium.com/@desoga/angular-vs-react-vs-vue-getting-started-52e8cad74ba8