使用 ASP.NET Core 进行现代全栈 Web 开发: 10 JavaScript 框架简介

最新推荐文章于 2026-05-22 08:00:00 发布

原创最新推荐文章于 2026-05-22 08:00:00 发布 · 1k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #开发语言

使用 ASP.NET Core 进行现代全栈 Web 开发专栏收录该内容

16 篇文章

订阅专栏

JavaScript 框架已成为 Web 开发中不可或缺的工具，为构建高效、大型且复杂的前端应用提供了成熟的解决方案。市场上有多种框架可供选择，每种框架都有其独特的特点。本章旨在帮助读者理解三种最流行的 JavaScript 框架：Angular、React 和 Vue.js 的基本概念。您将了解它们的核心原理和适用场景，这些知识将帮助您根据项目需求选择最合适的框架。

本章将探讨 JavaScript 框架的基础概念，重点解析它们之间的差异。我们将学习如何开始使用这些框架，创建组件并搭建基础结构，以便后续深入理解本书中各个框架的核心概念。通过本章学习，您将掌握这些框架的关键特性，并能将相关概念应用于简单的网页项目中。

本章将涵盖以下主要内容：

Angular 框架概述
React 框架入门指南
理解 Vue.js 的基础知识

20年工作经验，承接微信小程序，App，网站，网站后端开发。有意向私聊我哈。微信:akluse

Angular 概述

Angular 是一个由谷歌自 2010 年起开发维护的强大 JavaScript 框架。其最初版本名为 AngularJS。由于该框架多年来经历了重大演变，其名称更改为 Angular，旨在向企业、开发人员和技术社区表明其核心已发生根本性变化，需要一个新的名称。 Angular 基于 TypeScript 构建，这有助于开发者在开发过程中早期发现错误。TypeScript 通过添加静态类型增强了 JavaScript，使开发者能在编译时而非运行时发现错误。凭借强大的类型系统，TypeScript 能生成更可靠、更易维护的代码，这对于大型复杂应用程序尤为有用。

以下是这个强大 JavaScript 框架的关键特性：

基于组件的架构 ：Angular 鼓励开发者采用模块化方式构建 Web 应用，其核心是大量使用可复用组件的概念。
依赖注入 ：Angular 在其核心中广泛使用依赖注入，这促进了良好的开发实践，并提高了可测试性和可扩展性，尤其适用于复杂项目。
双向数据绑定 ：Angular 实现了模型与用户界面之间的数据同步。这确保了模型的任何变更都会自动反映在界面上，反之亦然，从而为用户和开发者带来更好的体验。
响应式编程 ：Angular 采用 RxJS，这是一个用于响应式编程的库，使开发者能够处理异步数据流。这对于处理大型应用中的复杂场景和精细化工作流尤为有用。
广泛的工具支持 ：Angular 拥有强大的 命令行界面 （ CLI ），可提升开发体验，协助完成项目设置、部署及测试工作。
路由：Angular 拥有原生路由系统，支持应用内页面导航并实现懒加载，通过仅在需要时加载必要组件，显著提升了用户体验和应用性能。

下一节我们将学习如何搭建本地环境以便使用 Angular，使您能够复现后续章节的代码示例。

配置 Angular 开发环境

开始 Angular 开发前，您需要安装 Angular CLI——一个辅助开发流程的命令行工具。安装时请在终端（ cmd 或 VS Code 中的终端）运行以下命令：

npm install -g @angular/cli

此命令将在您的本地环境中安装 Angular CLI，便于您使用命令行创建和管理 Angular 项目。

完成此安装后，您就可以创建第一个 Angular 应用程序了。在下一节中，我们将逐步创建组件并了解典型的 Angular 项目结构。

创建您的第一个 Angular 项目

首先，您需要使用终端通过 Angular CLI 工具创建 Angular 应用程序。您可以通过以下命令实现这一点，其中还可以指定应用程序的名称：

ng new angular-chapter-10

在本示例中，应用程序的名称为 angular-chapter-10 。 Angular CLI 提供了为应用程序选择样式表格式的选项，如 图 10 .1 所示 :

图 10.1：Angular 的样式表格式

在本项目示例中，本章使用了第一个样式表选项，即标准 CSS 格式。此外，Angular CLI 会询问是否启用 服务端渲染 (SSR) 和 静态站点生成 (SSG/预渲染) ，如 图 10 .2 所示 :

图 10.2：SSR 配置

这种情况下你可以选择"No"，因为我们本章不会使用 SSR。 SSR 是一种 Angular 应用的 HTML 在服务器端而非客户端生成的技术方案。采用这种方式时，当用户在浏览器请求页面时，服务器会进行处理并返回完整生成的 HTML。该技术根据应用特性可提升性能，对 SEO 更友好，并且由于通常比客户端渲染加载更快，能提供更好的用户体验。但 SSR 配置可能更复杂，且需要服务器基础设施来处理请求。因此，在做出这个决定时需要权衡利弊。

确认选择后，该命令将生成新项目并安装所有必要的文件和包。你可以通过运行以下命令进入新创建的项目目录，其中第二部分是你的项目名称：

cd angular-chapter-10

要启动并运行您的应用程序，可以使用 Angular CLI 的 serve 命令，如以下示例所示：

ng serve

该命令会构建应用程序，并将其部署在默认的本地主机 URL 上以供执行，如图 10.3 所示 :

图 10.3：ng serve 命令的执行结果

如果你打开终端中显示的URL，Angular应用程序将在默认浏览器中启动，显示Angular项目中存在的默认组件，如图10.4所示：

图 10.4：在浏览器中运行的 Angular 应用程序

Angular 应用程序自带默认结构和特定示例组件。如果使用的是最新版 Angular CLI，项目结构应如下所示：

图 10.5：Angular 项目结构

当你使用 Angular CLI 创建 Angular 项目时，其目录结构的设计旨在帮助开发者遵循 Angular 应用的最佳实践。根目录下包含若干关键文件和文件夹。

在此目录结构中， node_modules 文件夹包含了应用所需的所有依赖项和包。这些包会在执行 npm install 命令或使用 create-react-app 创建新项目时自动安装。该文件夹完全由 NPM 管理。任何手动修改都会被 npm 命令覆盖。你无需对该文件夹进行任何修改。

src 文件夹至关重要，因为它包含了实际的应用程序代码。在此文件夹中，您会找到 app 文件夹，其中存放着应用程序组件、模块以及基础服务。

angular.json 文件集中管理 Angular CLI 的配置，允许您决定项目的构建方式，包括环境配置。而 package.json 文件则包含了所有项目依赖项和自动化特定任务（如服务和构建 Angular 应用程序）的脚本。

最后， tsconfig.json 文件定义了项目的 TypeScript 设置。此外，项目结构还包括诸如 .gitignore 和 .editorconfig 等文件，它们分别包含不应被 Git 跟踪的文件配置以及针对 Angular 的编辑器设置。

接下来我们将学习如何创建一个包含 HTML、CSS 和逻辑实现的基础 Angular 组件。

创建基础 Angular 组件

Angular 采用基于组件的架构，每个组件包含样式、HTML 和用 TypeScript 编写的逻辑。要创建基础 Angular 组件，可以使用 Angular CLI，如以下命令所示：

ng generate component my-component --standalone

在此命令中， my-component 是组件的实际名称。执行后，将在 app 文件夹下生成新文件夹，如 图 10 .6 所示 :

图10.6：组件结构

最佳实践是将 Angular 组件的 CSS、HTML、逻辑和测试文件分开存放，因为这是 Angular CLI 遵循的规范。默认情况下，所有组件文件都带有 component 后缀。打开 my-component.component.ts 文件后，您可以添加一个 title 属性并将类重命名为 MyComponent ，如以下代码所示：

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [],
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css'
})
export class MyComponent {
  title = "My first Angular component"
}

现在 title 属性已创建，您可以在组件的对应 HTML 文件（ my-component.component.html ）中引用它，如以下代码所示：

<p>{{ title }}</p>

要在整个应用中使用该组件并验证其是否能按预期显示标题，您可以在 app.component.ts 文件中引用新创建的组件，如以下代码所示：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  MyComponent
} from './my-component/my-component.component';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MyComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-chapter-10';
}

在此情况下，新组件的路径在文件开头被引用，MyComponent 导出类被引用在 imports 属性中，该属性属于 @Component 指令。

由于新组件已在 app.component.ts 文件中注册，您可以在 app.component.html 文件中使用该组件，如以下代码所示：


<h1>Hello, {{ title }}</h1>
<p>Congratulations! Your app is running. 🎉</p>
<br>
<p>
  <app-my-component></app-my-component>
</p>

如果在浏览器中打开该应用程序，您将看到组件内容与 title 属性中指定的消息一起显示——即 我的第一个 Angular 组件 ——如 图 10 .7 :

图10.7：显示的新组件

Angular 是一个直观易用的框架，使开发者能够轻松创建动态网页应用。本节旨在提供 Angular 的基础概述。在第 13 章中，您将有机会更深入地探索这个强大框架，包括如何调用后端 API 以及处理更复杂的场景。

下一节我们将学习 React 的基础知识，这是另一个用于构建现代网页应用的流行且强大的 JavaScript 框架。

React 入门指南

React 是一个强大且流行的 JavaScript 框架，用于构建 单页应用程序 （ SPA），这类应用在用户页面间导航时无需完全重新加载。该框架由 Facebook 开发，具备强大成熟的功能，并得到全球 React 生态系统技术社区的支持。

该框架具有以下关键特性与优势：

虚拟 DOM 操作 ：React 使用虚拟 DOM 来提升可视化组件的渲染性能。这意味着当状态变化时，框架会对比虚拟 DOM 与实际 DOM，以确定哪些更新需要反映到浏览器中，从而使渲染过程高效。
基于组件的架构 ：与 Angular 类似，React 遵循可复用组件的理念，每个组件封装了 HTML、CSS 和逻辑代码。
JavaScript XML (JSX) ：React 支持使用 JSX，这种语法模式允许在 JavaScript 代码中编写类似 HTML 的代码。该特性使开发者能够直观地在 JavaScript 代码中呈现 HTML 结构。值得注意的是，虽然 JSX 语法在 React 社区中被广泛使用，但其适用性尚未达成普遍共识。
钩子(Hooks) ：React 实现了钩子概念，这是一种使用函数式组件管理状态的方式。该方法无需显式创建基于类的组件，即可编写更具声明性和模块化的代码。
单向数据流 ：React 采用单向数据流的工作机制，这意味着父组件与子组件之间的通信只能沿单一方向进行。这种机制简化了复杂应用的状态管理，从而提升了开发者在调试具有复杂数据流的大型应用时的开发体验。
React 状态与响应式机制 ：在 React 中，状态管理动态数据，使组件具有交互性且响应灵敏。借助 React 的响应式特性，任何状态更新都会使受影响的组件自动重新渲染，从而反映最新数据。

下一节中，您将了解如何配置本地环境以便开发 React 应用程序。

配置 React 开发环境

要开发 React 应用，您需要全局安装 create-react-app 包，运行以下命令：

npm install -g create-react-app

该命令会在您的机器上全局安装 create-react-app 工具，便于您通过终端从任意位置创建 React 应用。

运行命令后，您可以验证安装是否成功。通过执行以下命令检查安装情况：

create-react-app –-version

该命令会显示 create-react-app 包的版本号。完成此安装后，您将能够使用该框架提供的独立方法来创建 React 应用。

在下一节中，我们将通过从头开始创建一个简单的应用程序，来探索 React 应用的基本概念。

创建一个基础的 React 应用

React 采用基于组件的架构，每个组件都包含必要的样式、HTML 和逻辑。要创建一个基础的初始 React 应用，可以使用 create-react-app 工具并指定应用名称，如以下命令所示：

create-react-app react-chapter-10

本例中， react-chapter-10 是应用程序的名称。您可以在本地环境中指定自己的名称。执行命令后，您可以通过运行 cd 命令加上项目名称来导航到项目目录，如以下命令所示：

cd react-chapter-10

要启动 React 应用的开发服务器并在浏览器中查看新创建的应用，您可以使用以下命令：

npm start

如果您正确执行了前面的命令，应用应该会自动在浏览器中打开，如 图 10 .8 所示 :

图 10.8：运行中的 React 应用程序

至此，你的第一个 React 应用已经成功运行！ create-react-app 命令创建了一个默认的文件夹结构和示例组件，通过提供如何设置和创建其他组件的示例来帮助开发者。文件夹结构如下所示：

图 10.9：React 应用结构

public 文件夹包含项目所有的静态资源和主 HTML 文件。静态文件包括图片、样式表、HTML 以及其他需要由应用程序提供但无需通过组件逻辑动态处理的资源。

在 public 文件夹中，index.html 是主要的 HTML 文件。它作为 React 应用的起点，浏览器在首次请求该应用时会下载此文件。该文件包含应用全局所需的所有 CSS 和 JavaScript 文件引用，这些资源将被整个应用使用。此外，该文件还包含一个 <div> 元素，其 ID 为"root"，如下面代码片段所示：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width,
      initial-scale=1"
    />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link
      rel="apple-touch-icon"
      href="%PUBLIC_URL%/logo192.png"
    />
    <link
      rel="manifest"
      href="%PUBLIC_URL%/manifest.json"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

React 使用此元素来渲染您的应用程序。当您创建 React 应用程序时，它是默认的根元素。

src 目录包含您的 React 应用程序的实际源代码。在此文件夹中， index.js 文件指示 React 应用程序应使用 root 元素来渲染应用，如以下示例所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root =
  ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

App.js 文件位于 src 文件夹内，是您 React 应用程序中整个逻辑的入口点。以下是您新创建的应用程序中该文件应有的样子：

import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

package.json 文件包含了应用程序运行所需的所有依赖项和配置。 .gitignore 文件用于告知 Git 在版本控制中应忽略哪些文件和目录。此外， src 文件夹中包含应用程序的全局 .css 文件。这些文件包含基础样式，除非被其他 CSS 文件覆盖，否则将应用于所有组件。

在下一节中，您将学习如何创建您的第一个 React 组件。

创建 React 组件

由于 React 采用基于组件的架构，理解 React 提供的主要组件类型对于封装功能逻辑、样式和结构以及可复用代码至关重要。

开发者可以使用两种 React 组件：

函数式组件 ：这些是返回 JSX 的 JavaScript 函数。其结构更具可读性，特别是与 Hooks 结合使用时，能够高效地管理函数式组件中的状态和副作用。
类组件 ：这些组件是继承自 ECMAScript 6 类的 React.Component 类型，并包含一个用于渲染 UI 的方法。值得注意的是，函数式组件因其简洁性和与 Hooks 的兼容性，已成为创建组件最流行的方式。

本章我们将重点介绍函数式组件，因为这是 React 应用中创建组件的标准方式。要创建新组件，请遵循以下步骤：

在 VS Code 中导航到 React 项目的 src 目录，创建一个 components 文件夹来组织存放您的组件。
接下来，在 VS Code 的 components 文件夹中创建一个 MyComponent.js 文件。
打开新的 MyComponent.js 文件并定义一个函数式组件，如下面的代码所示：
```
import React from 'react';
function MyComponent() {
  return (
    <div className="my-component">
      <h2>This is my first React component!</h2>
      <p>Congratulations for your first component.</p>
    </div>
  );
}
export default MyComponent;
```
在这段代码中， import React from 'react' 这个导入语句是使用 JSX 的必要条件。此外， function MyComponent {..} 明确定义了一个名为 MyComponent 的函数式组件，该组件返回一个决定用户界面外观的 JSX 组件。

要测试您新创建的 React 组件，可以将其导入并包含在 App.js 文件中，如以下代码所示：

import logo from './logo.svg';
import './App.css';
import MyComponent from './components/MyComponent';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <main>
        <MyComponent />
      </main>
    </div>
  );
}
export default App;

在此 App.js 文件中，通过 import MyComponent from './components/MyComponent'; 这行代码对组件的引用，使得该组件可以在 App 的上下文中使用。此外，App 组件的内容还包含 <MyComponent /> 引用，用于渲染组件的输出内容。

要在浏览器中查看您的组件，请通过终端在应用程序的根目录下重新运行 npm start 命令。然后，在浏览器中打开默认 URLhttp://localhost:3000/；您将在页面底部看到组件内容，如图 10.9 所示。 :

图 10.10：React 组件视图

React 是一个十分流行的库，能够帮助创建功能强大的 Web 应用程序。本节仅旨在提供 React 的基础概述。在第 14 章中，您将有机会更详细地探索 React，包括如何连接后端 API 以及管理更复杂的场景。

下一节中，我们将学习 Vue.js ，这是另一个非常流行的 JavaScript 框架，用于构建 SPA。

了解 Vue.js 的基础知识

Vue.js 是一款非常流行的 JavaScript 框架，它以比其他 JavaScript 框架更简单而著称。该框架由 Angular 项目核心团队前成员尤雨溪开发。 Vue.js 特别适合采用 SPA 方式构建丰富的用户界面。这个强大的框架具有以下主要特性：

基于组件的架构 ：与 Angular 和 React 类似，Vue.js 采用基于组件的架构，允许将 UI 元素划分为可复用的组件，这些组件封装了 HTML、逻辑和样式。
单文件组件 ：Vue 允许您使用 .vue 扩展名创建单文件组件。这种方式让您能够以结构化的方式将 HTML、JavaScript 和 CSS 实现组合在单个文件中。
Vue Router ：Vue 内置了 Vue Router 作为其官方导航与路由工具。 Vue Router 允许开发者建立路由、管理动态路由，并通过无需整页刷新的方式加载视图或组件，实现单页应用体验。这对于需要结构化导航和流畅视图过渡的应用尤为有益。
Pinia（状态管理） ：Pinia 已取代 Vuex 成为 Vue 3 中首选的状态管理库。它提供了更简洁的 API，同时兼容组合式 API 和选项式 API，使得应用状态集成更加便捷。虽然 Vuex 曾是 Vue 的状态管理方案，但 Pinia 凭借轻量级模块化设计成为现代 Vue 应用的首选，显著提升了响应性与灵活性。
指令：Vue.js 使用标准指令来控制组件的渲染。所有指令都带有 v- 前缀，例如 v-if 和 v-for ，这使得我们能够更直观地控制 DOM 元素。

要开始使用 Vue.js 构建应用，您需要先配置本地环境，安装 Vue CLI ——一个便于创建 Vue 应用的命令行工具。安装时，请在终端中执行以下命令：

npm install -g @vue/cli

此命令将全局安装 Vue CLI ，使您可以在环境中的任何位置运行 Vue 命令。安装 Vue CLI 后，您可以使用以下命令：

vue create chapter-10-vue-app

此外，你可以在 VS Code 上安装 Vue 扩展以获得正确的语法高亮显示。

在此命令中，你可以指定应用程序的名称。本示例中，其名称为 chapter-10-vue-app 。 Vue CLI 将显示配置选项供你在创建过程中选择。请选择 Vue 3 版本，这是最新的版本。

项目创建完成后，使用以下命令进入项目目录，并指定你的项目名称：

cd chapter-10-vue-app

要运行新创建的应用程序并在浏览器中查看，请执行以下命令：

npm run serve

此命令将启动开发服务器。您可以通过访问默认 URL http://localhost:8080 在浏览器中查看应用程序，如 图 10 .11 所示。 :

图 10.11：运行中的 Vue.js 应用程序

在下一节中，您将学习如何创建您的第一个 Vue 组件。

创建一个基础的 Vue.js 组件

要创建一个新的 Vue 组件，在 VS Code 中，导航至 src/components 目录并新建一个名为 MyComponent.vue 的文件，包含以下内容：


<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>
<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'My first Vue component!',
        description: 'I am proud of my first component.'
      };
    }
  };
</script>
<style scoped>
  .my-component {
    border: 1px solid black;
    padding: 15px;
    border-radius: 4px;
    background-color: blanchedalmond;
  }
  .my-component h2 {
    color: black;
  }
</style>

在这段代码中，<template> 块包含了组件的 HTML 结构。可以使用 {{ }} 指令将数据绑定到用户界面。

<script> 部分包含组件的逻辑，包括方法、事件和数据。在此示例中， data 函数返回两个属性： title 和 description 。这些属性在模板块中用于显示数据。

<style scoped> 块包含组件的 CSS 样式。由于使用了 scoped 属性，这些样式仅适用于组件本身的上下文。这样可以防止 CSS 影响应用程序的其他部分。

要显示新创建的组件，您可以编辑 App.vue 文件使其包含该组件，如以下代码所示：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <br>
  <MyComponent />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import MyComponent from './components/MyComponent.vue';
export default {
  name: 'App',
  components: {
    HelloWorld,
    MyComponent
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这段代码中，组件通过 import MyComponent from './components/MyComponent.vue'; 被导入，使得该组件可以在 App 组件的上下文中使用。同时需要如前面代码所示，在 components 属性中注册该组件。最后，在模板中使用 <MyComponent /> 标签来在实际渲染 App 组件中的内容。

如果您的应用程序仍在浏览器中运行，当您保存相关文件的更改后，应该会在页面底部看到新添加的组件，如图 10.12 所示 :