从零开始 Blazor：第 2 章 — 你的第一个 Blazor 应用

欢迎来到 从零开始 Blazor 第 2 章。如果你还没看第 1 章，建议先读一下。

这一章我们会创建一个新的 Blazor 应用，在本地跑起来，并理解核心文件各自负责什么。

第 1 步：创建项目

在终端中执行：

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

这会创建一个采用默认结构的 .NET 9 Blazor Web App。

如果工具让你选择交互模型，先使用 Interactive Server。

第 2 步：本地运行

启动应用：

dotnet watch

然后打开终端里显示的 URL（通常是 https://localhost:5xxx）。你应该能看到默认的 Home、Counter、Weather 页面。

如果能正常打开，你的开发环境就准备好了。

第 3 步：理解项目结构

先掌握这些关键文件和目录：

• Program.cs —— 注册服务并配置 HTTP 管道。
• Components/App.razor —— 应用根组件。
• Components/Routes.razor —— 页面路由映射。
• Components/Pages/ —— 可路由页面（如 Home、Counter）。
• Components/Layout/ —— 共享布局（MainLayout.razor、导航菜单）。
• wwwroot/ —— 静态资源（CSS、图片、favicon）。
• appsettings.json —— 配置值。

现在不需要把每个文件都吃透。这个阶段先知道 UI 在哪里、启动配置在哪里就够了。

第 4 步：做第一次修改

打开 Components/Pages/Home.razor，替换为：

@page "/"

<PageTitle>从零开始 Blazor</PageTitle>

<h1>从零开始 Blazor</h1>
<p>第 2 章内容已在本地运行。</p>

保存并刷新浏览器。使用 dotnet watch 时，修改会立即生效。

这个小改动验证了完整流程：编辑 -> 构建 -> 渲染。

第 5 步：读一遍 Program.cs

不用死记硬背，但请认识这几行：

• AddRazorComponents()：启用 Razor 组件。
• AddInteractiveServerComponents()：启用服务端交互组件。
• MapRazorComponents<App>()：将根组件映射到端点。

这些代码说明了应用如何启动，以及启用了哪些渲染能力。

常见问题

如果运行失败，通常是以下原因：

• SDK 版本过旧：执行 dotnet --version，确认是 .NET 9。
• HTTPS 证书问题：执行 dotnet dev-certs https --trust。
• 端口冲突：停止旧的 dotnet 进程后再运行。

下一章

第 3 章我们将深入讲 组件：参数、组合方式，以及如何组织可复用 UI。