直接用dotnet new命令可创建Blazor Server或WebAssembly项目：dotnet new blazorserver -n MyBlazorApp 或 dotnet new blazorwasm -n MyBlazorApp；需严格匹配文件名（PascalCase）与@page指令，事件处理函数参数类型须准确，StateHasChanged()仅在非组件线程更新状态时必要。
直接用 dotnet new 命令就能创建可运行的 Blazor 应用，不用装额外插件、不依赖 Visual Studio —— 但选错模板或忽略项目结构细节，后续改起来会卡在路由不生效、组件不渲染、状态不更新这些地方。
用 CLI 创建 Blazor Server 或 WebAssembly 项目
命令行是最轻量也最可控的方式。注意模板名必须准确，大小写和连字符都不能错：
-
dotnet new blazorserver -n MyBlazorApp→ 创建 Server 模式（依赖 SignalR，服务端渲染） -
dotnet new blazorwasm -n MyBlazorApp→ 创建 WebAssembly 模式（纯前端，.NET 运行在浏览器里）
别用 blazor 这个模糊模板名，它已被弃用；也别漏掉 -n 参数，否则生成的项目名是默认的 WebApplication1，容易和已有项目混淆。创建后进目录执行 dotnet run，看到 Now listening on: https://localhost:7055 就说明启动成功。
@page 和组件文件名必须严格匹配
Blazor 不靠文件路径注册路由，而是靠 @page 指令 + 文件名首字母大写。常见错误包括：
- 新建了
counter.razor（小写 c），写了@page "/counter"→ 浏览器能访问，但组件不渲染，控制台报Failed to find a valid digest in the index.html - 写了
@page "/Counter"但文件叫Counter.razor→ 路由能命中，但currentCount变量不响应式更新，因为组件类名生成失败
正确做法：文件名必须 PascalCase（如 Counter.razor），@page 后面的路径可以任意，但组件标签名（比如 partial 关键字 —— .razor 编译器会自动生成。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
事件处理函数签名错一个字母就静默失败
Blazor 的 @onclick 等事件绑定不报编译错误，但参数类型不对会导致点击无反应。比如：
-
private void IncrementCount(MouseEventArgs e)→ 正确，能拿到按键状态 -
private void IncrementCount(ClickEventArgs e)→ 错误，ClickEventArgs不存在，方法根本不会被调用，控制台也没提示 -
private void IncrementCount()→ 正确，但拿不到事件上下文
其他常见事件参数类型：KeyboardEventArgs（@onkeypress）、ChangeEventArgs（@onchange）、EventArgs（通用兜底）。别猜，查 MS Docs 的 Event handling 页面 确认拼写和命名空间。
StateHasChanged() 不是万能解药，乱用反而掩盖问题
当 UI 没刷新，第一反应不是加 StateHasChanged()，而是检查是否在非组件线程里修改了状态。比如：
- 在
Task.Run(() => { currentCount++; })里改变量 → 必须显式调用StateHasChanged()，否则 UI 不更新 - 在
async Task FetchData()里 await 完再改currentCount→ 不需要手动调用，Blazor 自动触发重渲染 - 在
OnInitializedAsync里改完就调StateHasChanged()→ 多余，该生命周期结束后 Blazor 本就会刷新一次
真正该警惕的是：加了 StateHasChanged() 后 UI 刷新了，但数据又回退了 —— 这往往说明你在多个地方重复初始化或覆盖了状态，而不是渲染机制的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
