练习 - 创建并运行 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 应用项目:
使用 Ctrl+Shift+P 打开命令面板,然后键入“.NET”。
查找并选择“.NET:新建项目”命令。
在下拉列表中选择 Blazor Web 应用。
选择要在其中创建新项目的文件夹。
将项目命名为“BlazorApp”,然后按 Enter 进行确认。
在“解决方案资源管理器”中查看新的 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 定义应用项目及其依赖项,且可以通过双击解决方案资源管理器中的项目节点进行查看。
- Properties 目录中的 launchSettings.json 文件定义本地开发环境的不同配置文件设置。 在创建项目时自动分配端口号,并将其保存在此文件上。
使用集成调试器运行应用
在 Visual Studio Code 中,从菜单中选择“运行”。
选择“开始调试”。
从“选择调试器”下拉列表中选择“C#”。
选择“C#:BlazorApp [默认配置]”
这将在启用了调试的情况下构建和启动应用。 默认浏览器应会自动打开该应用。 浏览器可能会警告你站点不安全;此时可以继续安全操作。
可选:使用 .NET CLI 运行应用
在终端窗口中复制并粘贴以下命令,以运行应用和监视文件更改:
dotnet watch
此命令构建并启动应用,然后将任何代码更改应用到正在运行的应用。 默认浏览器应会自动打开该应用。 浏览器可能会发出警告此站点还没有有效的证书;可以安全继续访问。
已成功运行第一个 Blazor 应用!
创建新的 Blazor 应用
Visual Studio 是一个用于 .NET 开发且功能齐全的 IDE,使创建 Blazor 应用变得非常容易。
若要使用 Visual Studio 创建和使用 Blazor Web 应用,请务必使用 Visual Studio 安装程序安装“ASP.NET 和 Web 开发”工作负载。
若要使用 Visual Studio 创建新的 Blazor Web 应用:
启动 Visual Studio 并选择“创建新项目”。
在“创建新项目”窗口中,在搜索框中键入“Blazor”,然后按 Enter。
选择“Blazor Web 应用”模板,然后选择“下一步”。
在“配置新项目”窗口中,输入“BlazorApp”作为项目名称,然后选择“下一步”:
在“其他信息”窗口中,如果尚未选择“.NET 8.0(长期支持)”,请在“Framework”下拉列表中选中它,然后单击“创建”按钮。
创建 Blazor Web 应用时,可以选择各种选项,例如是否启用身份验证、启用哪种交互呈现模式以及希望交互的应用数量。 对于此应用,请确保选择默认值,如下所示:
- 身份验证类型:无
- 交互式呈现模式:服务器
- 交互位置:每页面/组件
项目在 Visual Studio 中创建并加载。 使用“解决方案资源管理器”查看项目的内容。
创建了多个文件,以提供准备好运行的简单 Blazor 应用:
- Program.cs 是用于启动服务器的应用的入口点,并且将在这里配置应用服务和中间件。
- App.razor 是应用的根组件。
- Routes.razor 配置 Blazor 路由器。
- Components/Pages 目录包含应用的一些示例网页。
- BlazorApp.csproj 定义应用项目及其依赖项,且可以通过双击解决方案资源管理器中的项目节点进行查看。
- Properties 目录中的 launchSettings.json 文件定义本地开发环境的不同配置文件设置。 在创建项目时自动分配端口号,并将其保存在此文件上。
运行应用
单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用。
应用运行后,可以通过单击“热重载”按钮将代码更改应用到正在运行的应用。
可通过单击顶部工具栏中的“停止”按钮随时停止应用。
首次在 Visual Studio 中运行 Web 应用时,它将设置一个开发证书用于通过 HTTPS 托管应用,然后提示你信任该证书。 我们建议同意信任该证书。 该证书仅用于本地开发,如果没有则大多数浏览器都会抱怨网站的安全性。
等待应用在浏览器中启动。 转到以下页面后,你已成功运行了首个 Blazor 应用!
在后面的练习中会用到此 Blazor 应用。