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

本模块使用 .NET 8.0 SDK。 通过在首选命令终端中运行以下命令，确保你已安装 .NET 8.0：

dotnet --list-sdks

将显示类似于以下示例的输出：

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

确保列出了以 8 开头的版本。 如果未列出或找不到该命令， 请安装最新的 .NET 8.0 SDK。

使用 C# 开发工具包创建新的 Blazor Web 应用

若要使用 C# 开发工具包在 Visual Studio Code 中创建新的 Blazor Web 应用项目：

1. 使用 Ctrl + Shift + P 打开命令面板，然后键入 .NET。

2. 查找并选择“.NET：新建项目”命令。

3. 在下拉列表中选择 Blazor Web 应用 。

4. 选择要在其中创建新项目的文件夹。

5. 将项目命名为 BlazorApp ，然后按 Enter 进行确认。

6. 选择“创建项目”。

7. 在 资源管理器中查看新的 Blazor 应用项目。

可选：使用 .NET CLI 创建新的 Blazor 应用

若要使用 .NET SDK 从命令行创建 Blazor Web 应用项目，请使用以下命令：

dotnet new blazor

无论是使用 Visual Studio Code 或 .NET CLI 创建了 Blazor 应用，生成的项目都包含以下文件和页面：

• Program.cs 是启动服务器和配置应用服务和中间件的应用的入口点。
• App.razor 是应用的根组件。
• Routes.razor 配置 Blazor 路由器。
• Components/Pages 目录包含应用的一些示例网页。
• BlazorApp.csproj 定义应用项目及其依赖项，可以通过双击解决方案资源管理器中的项目节点来查看。
• 属性目录中 的launchSettings.json 文件为本地开发环境定义不同的配置文件设置。 在创建项目时自动分配端口号，并将其保存在此文件上。

使用集成调试器运行应用

1. 在 Visual Studio Code 中，从菜单中选择 “运行 ”。

2. 选择“ 开始调试”。

3. 从“选择调试器”下拉列表中选择 C# 。

4. 选择 C#：BlazorApp [默认配置]

   这将在启用了调试的情况下构建和启动应用。 默认浏览器应会自动打开该应用。 浏览器可能会警告你站点不安全；此时可以继续安全操作。

   

可选：使用 .NET CLI 运行应用

1. 在终端窗口中复制并粘贴以下命令，以运行应用和监视文件更改：

   dotnet watch
   

   此命令构建并启动应用，然后将任何代码更改应用到正在运行的应用。 默认浏览器应会自动打开该应用。 浏览器可能会发出警告此站点还没有有效的证书；可以安全继续访问。

已成功运行第一个 Blazor 应用！

创建新的 Blazor 应用

Visual Studio 是一个用于 .NET 开发且功能齐全的 IDE，使创建 Blazor 应用变得非常容易。

若要使用 Visual Studio 创建和使用 Blazor Web 应用，请务必使用 Visual Studio 安装程序安装“ASP.NET 和 Web 开发”工作负载。

若要使用 Visual Studio 创建新的 Blazor Web 应用：

1. 启动 Visual Studio 并选择“创建新项目”。

2. 在“创建新项目”窗口中，在搜索框中键入“Blazor”，然后按 Enter。

3. 选择“Blazor Web 应用”模板，然后选择“下一步”。

   

4. 在“配置新项目”窗口中，输入“BlazorApp”作为项目名称，然后选择“下一步”：

   

5. 在“其他信息”窗口中，如果尚未选择并选择“创建”按钮，请在框架下拉列表中选择 .NET 8.0（长期支持）。

   创建 Blazor Web 应用时，可以选择各种选项，例如是否启用身份验证、启用哪种交互呈现模式以及希望交互的应用数量。 对于此应用，请确保选择默认值，如下所示：

   • 身份验证类型：无
   • 交互式呈现模式：服务器
   • 交互位置：每页面/组件

   

项目在 Visual Studio 中创建并加载。 使用“解决方案资源管理器”查看项目的内容。

创建了多个文件，以提供准备好运行的简单 Blazor 应用：

• Program.cs 是启动服务器和配置应用服务和中间件的应用的入口点。
• App.razor 是应用的根组件。
• Routes.razor 配置 Blazor 路由器。
• Components/Pages 目录包含应用的一些示例网页。
• BlazorApp.csproj 定义应用项目及其依赖项，可以通过双击解决方案资源管理器中的项目节点来查看。
• 属性目录中 的launchSettings.json 文件为本地开发环境定义不同的配置文件设置。 在创建项目时自动分配端口号，并将其保存在此文件上。

运行应用

在 Visual Studio 的“调试工具栏”中选择“ 开始调试 ”按钮（绿色箭头），以运行应用。

应用运行后，可以通过选择 “热重载 ”按钮将代码更改应用到正在运行的应用。

你可以随时通过选择顶部工具栏中的 “停止 ”按钮来停止应用。

首次在 Visual Studio 中运行 Web 应用时，它会设置一个开发证书，用于通过 HTTPS 托管应用，然后提示你信任该证书。 我们建议同意信任该证书。 该证书仅用于本地开发，没有它，大多数浏览器都会抱怨网站的安全性。

等待应用在浏览器中启动。 转到以下页面后，你已成功运行了首个 Blazor 应用!