练习 - 创建并运行 Blazor Web 应用

已完成

首先,让我们创建第一个 Blazor Web 应用。

本模块使用 .NET CLI(命令行接口)Visual Studio CodeVisual Studio 2022 进行本地开发。 完成本模块后,你可以使用 Visual Studio for Mac (macOS) 等开发环境来应用其概念,或者使用 Visual Studio Code(Windows、Linux 和 macOS)或 Visual Studio 进行持续开发。

此模块使用 .NET 6.0 SDK。 通过在首选终端中运行以下命令,确保你已安装 .NET 6.0:

dotnet --list-sdks

将显示类似于下面的输出:

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

确保列出了以 6 开头的版本。 如果未列出任何版本或未找到命令,请安装最新的 .NET 6.0 SDK

创建新的 Blazor 应用

为了设置 Blazor 项目来配合工作,我们将使用 Visual Studio Code。 Visual Studio Code 包含一个集成终端,这使创建新项目变得简单。 如果不想使用其他代码编辑器,可在终端中运行此模块中的命令。

  1. 在 Visual Studio Code 中,选择“文件”>“打开文件夹”。

  2. 在选择的位置中新建一个名为 BlazorApp 的新文件夹,然后选择“选择文件夹”。

  3. 从主菜单中选择“视图”>“终端”,以便从 Visual Studio Code 中打开集成终端。

  4. 在终端窗口中,复制粘贴以下命令。

    dotnet new blazorserver -f net6.0
    

    除了一个名为 BlazorApp.csproj 的 C# 项目文件,此命令还将创建一个基本的 Blazor 服务器项目,其中包含所有必需的文件和页面。

    你现在应可以访问以下文件。

    -| bin
    -| Data
    -| obj
    -| Pages
      -| _Host.cshtml
      -| Counter.razor
      -| Error.cshtml
      -| Error.cshtml.cs
      -| FetchData.razor
      -| Index.razor
    -| Properties
    -| Shared
      -| MainLayout.razor
      -| MainLayout.razor.css
      -| NavMenu.razor
      -| NavMenu.razor.css
      -| SurveyPrompt.razor
    -| wwwroot
    -| _Imports.razor
    -| App.razor
    -| appsettings.Development.json
    -| appsettings.json
    -| BlazorApp.csproj
    -| Program.cs
    
  5. 如果 Visual Studio Code 提示你安装所需的资产,请选择“是”。

    显示 Visual Studio Code 提示安装所需资产以进行生成和调试的屏幕截图。

运行应用程序

  1. 在终端窗口中复制粘贴以下命令,在监视模式中运行应用:

    dotnet watch run
    

    这将生成并启动应用,然后在你每次更改代码时重新生成并重启应用。 默认浏览器应会自动打开该应用。 浏览器可能会警告你站点不安全;此时可以继续安全操作。

    显示在浏览器中运行的默认 Blazor 应用的屏幕截图。

创建新的 Blazor 应用

为了设置 Blazor 项目来配合工作,我们将使用 Visual Studio 2022。 Visual Studio Code 包括集成的模板和编译器,这使得创建和生成新项目变得简单。

  1. 在 Visual Studio 2022 中,选择“文件”>“新建项目”。

  2. 在“创建新项目”对话框顶部的搜索框中,键入“Blazor Server”并选择“Blazor Server 应用”,然后选择“下一步”。

    Visual Studio 2022“新建项目”屏幕和 Blazor Server 模板的屏幕截图。

  3. 在随后的屏幕上,将项目命名为“BlazorApp”并使用如下设置在磁盘上指定一个位置,然后选择“下一步”:

    Visual Studio 2022“配置项目”屏幕和步骤 3 中建议的设置的屏幕截图。

  4. 在“附加信息”屏幕上,在“框架”组合框中选择“.NET 6.0(长期支持)”。 保持其他设置不变,然后选择“创建”。

  5. 此命令创建一个包含所有必需文件和页面的基本 Blazor Server 项目。

现在,你应该有权访问这些文件,Visual Studio 2022 中的解决方案资源管理器将如下所示:

Visual Studio 2022 解决方案资源管理器的屏幕截图,其中包含默认 Blazor Server 项目中的文件的列表。

运行应用程序

  1. 在 Visual Studio 中,选择“调试”>“开始调试”

    这将生成并启动应用,然后在你每次更改代码时重新生成并重启应用。 默认浏览器应会自动打开该应用。 浏览器可能会警告你站点不安全;此时可以继续安全操作。

    显示在浏览器中运行的默认 Blazor 应用的屏幕截图。

将在后面的练习中使用此 Blazor 应用。