从零开始：构建你的第一个 Blazor WebAssembly 应用

原创于 2025-09-25 21:44:00 发布 · 966 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#wasm #.netcore #Blazor #教程 #c#

第一章 Blazor WebAssembly 基础入门

1. Blazor WebAssembly 简介

什么是 Blazor 和 WebAssembly

📚 Blazor是一个由微软推出的开源 Web 框架，其核心优势在于允许开发者使用 C# 和 .NET 技术栈来构建丰富的交互式 Web 用户界面（UI），而无需过多依赖 JavaScript。它的名称 “Blazor” 是 Browser（浏览器）和 Razor（.NET 的模板引擎）的组合词，点明了其运行在浏览器中并使用 Razor 语法的特点。

⚡ WebAssembly（缩写为 WASM）是一种为 Web 设计的高性能、低级的二进制指令格式。它作为一种通用的编译目标，允许使用 C++、Rust、C# 等多种高级语言编写的代码在现代 Web 浏览器中以接近原生的速度运行。

Blazor WebAssembly 学习大纲

Blazor WebAssembly 的工作原理：

🛠️ 你的 C# 代码被编译成 .NET 程序集
📥 这些程序集与 .NET 运行时一起下载到浏览器
🚀 WebAssembly 在浏览器中执行 .NET 代码
🔄 通过 JavaScript 互操作与 DOM 交互

Blazor Server vs Blazor WebAssembly

特性	🔵 Blazor Server	🟢 Blazor WebAssembly
执行位置	🖥️ 服务器端	🌐 客户端浏览器
初始加载	⚡ 快速	📦 较慢（需要下载运行时）
网络依赖	📡 需要持续连接	📴 可离线工作
服务器负载	🔥 较高	❄️ 较低
客户端资源	💾 要求低	💻 要求较高

架构对比示意图：

架构对比示意图

优势和应用场景

✅ Blazor WebAssembly 的优势：

全栈 .NET 开发：前后端都使用 C#
丰富的生态系统：利用现有的 .NET 库和工具
性能优秀：接近原生应用的性能
安全可靠：代码在浏览器沙箱中运行
可离线运行：支持渐进式 Web 应用

🎯 适用场景：

🏢 企业内部应用
📊 数据密集型仪表板
⚙️ 需要复杂业务逻辑的应用
🔄 希望重用 .NET 技能的项目

2. 开发环境搭建

安装 .NET SDK

步骤 1：下载 .NET SDK
访问 https://dotnet.microsoft.com/download.NET官方网站下载最新版本的.NET SDK。

下载页面

根据你的操作系统选择合适版本：

Windows: x64 安装程序
macOS: x64 或 ARM64 安装程序
Linux: 选择对应的发行版

步骤 2：验证安装
💻 点击安装程序直接安装。

配置 Visual Studio

Visual Studio 2022 配置：

🛠️ 安装时选择"ASP.NET 和 Web 开发"工作负载
✅ 确保包含 Blazor WebAssembly 工具

安装步骤： 运行 Visual Studio Installer，点击"修改"现有安装或安装新版本在工作负载标签页中勾选ASP.NET 和Web开发。

勾选截图

浏览器要求和调试工具

🌐 支持的浏览器：

Chrome/Edge 90+
Firefox 90+
Safari 14+

🔧 启用调试： 在 Chrome/Edge 中：

按 F12 打开开发者工具
转到"源代码"标签
启用".NET 调试"

详细调试设置：

1. 确保安装了浏览器调试扩展
2. 在 launchSettings.json 中配置 inspectUri
3. 运行应用时，浏览器地址栏会显示"已连接调试器"

3. 创建第一个 Blazor WebAssembly 应用

项目模板介绍

📋 Blazor WebAssembly 提供多种项目模板：

# 查看可用模板
dotnet new --list

#主要模板：
dotnet new blazorwasm          # 独立 Blazor WebAssembly
dotnet new blazorwasm --hosted # 带 ASP.NET Core 主机
dotnet new blazorwasm --pwa    # 渐进式 Web 应用

模板选择指南：

🏢 企业应用：选择 --hosted（有后端 API）
📱 单页应用：选择独立版本
🔄 离线应用：选择 --pwa 版本

项目结构解析

🛠️ 让我们创建一个新项目并分析其结构：

# 创建Blazor WebAssembly 独立应用
dotnet new blazorwasm -n MyFirstBlazorApp
#进入项目文件夹
cd MyFirstBlazorApp

使用Visual Studio 2022打开项目

项目解决方案

🔍 关键文件详细解析：

📄 wwwroot/index.html - 应用入口：

应用入口部分代码

📄 Program.cs - 应用配置入口：

Program配置文件

运行和调试应用

▶️ 运行应用：

# 在项目目录中运行
dotnet run

#使用热重载（推荐用于开发）
dotnet watch run

运行效果图

🐛 调试配置：

在 Properties/launchSettings.json 中配置启动设置：

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:7228;http://localhost:5116",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

🔧 调试步骤：

在 Visual Studio 中按 F5 开始调试
或在 VS Code 中按 F5 选择".NET Core Launch"
🎯 在代码中设置断点
🔄 刷新浏览器触发断点

🔄 修改 Counter 组件体验实时更新：

打开 Pages/Counter.razor，修改代码：

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>记数器</h1>
<p role="status">当前计数: @currentCount 🎰</p>
<button class="btn btn-primary" @onclick="IncrementCount">🚀 点击我！(现在有表情！ 👍)</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount+=2;
    }
}

计数器页面运行效果图