首先,让我们创建第一个 Blazor Web 应用。
本模块使用 .NET CLI(命令行接口)、Visual Studio Code 和 Visual 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 包含一个集成终端,这使创建新项目变得简单。 如果不想使用其他代码编辑器,可在终端中运行此模块中的命令。
在 Visual Studio Code 中,选择“文件”>“打开文件夹”。
在选择的位置中新建一个名为 BlazorApp 的新文件夹,然后选择“选择文件夹”。
从主菜单中选择“视图”>“终端”,以便从 Visual Studio Code 中打开集成终端。
在终端窗口中,复制粘贴以下命令。
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
如果 Visual Studio Code 提示你安装所需的资产,请选择“是”。
运行应用程序
在终端窗口中复制粘贴以下命令,在监视模式中运行应用:
dotnet watch run
这将生成并启动应用,然后在你每次更改代码时重新生成并重启应用。 默认浏览器应会自动打开该应用。 浏览器可能会警告你站点不安全;此时可以继续安全操作。
将在后面的练习中使用此 Blazor 应用。