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

让我们设置 .NET 开发环境并创建第一个 Blazor Web 应用。

本模块提供使用 .NET CLI、Visual Studio Code 或 Visual Studio 2022 用于进行本地开发的选项。如果使用 Visual Studio Code 进行开发，请务必安装 C# 开发工具包扩展，我们将在本模块中使用它。

本模块使用 .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 应用项目：

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

dotnet new blazor

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

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

在 Visual Studio Code 中，从菜单中选择“运行”。
选择“开始调试”。
从“选择调试器”下拉列表中选择“C#”。
选择“C#:BlazorApp [默认配置]”

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

在终端窗口中复制并粘贴以下命令，以运行应用和监视文件更改：
```
dotnet watch
```
此命令构建并启动应用，然后将任何代码更改应用到正在运行的应用。默认浏览器应会自动打开该应用。浏览器可能会发出警告此站点还没有有效的证书；可以安全继续访问。

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

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

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

Screenshot of selecting the ASP.NET and web development workload in the Visual Studio installer.

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

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

Screenshot of Visual Studio 2022 Solution Explorer with a list of the files in a default Blazor project.

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

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