共计 2518 个字符，预计需要花费 7 分钟才能阅读完成。
作者介绍
陈超超
Ant Design Blazor 我的项目贡献者
领有十多年从业教训，长期基于.Net 技术栈进行架构与开发产品的工作，Ant Design Blazor 我的项目贡献者，现就职于正泰团体
第二次写专栏，结尾还是不晓得说什么，所以……先来段广告????
《进击吧！Blazor！》是自己与张善友老师单干的 Blazor 零根底入门系列视频，此系列能让一个从未接触过 Blazor 的程序员把握开发 Blazor 利用的能力。
视频地址：https://space.bilibili.com/48…
本系列文章是基于《进击吧！Blazor！》直播内容编写，降级.Net5，改良问题，解说更全面。
每一个教程的第一个 Demo 都是 Hello，巧了，Blazor 的默认模板就是一个现成的 Hello Blazor，咱们就从他的默认模板开始。
环境介绍
IDE：Visual Studio 16.8
创立我的项目
- 抉择 Blazor 利用
- 设置项目名称，这里我取名“BlazorToDo”是因为接下来第一个残缺 Demo 是一个待办事项小程序。
- 抉择 Blazor 利用模式，咱们接下来开发次要以 Blazor WebAssembly App 进行。
ASP.NET Core hosted选项用于管制是否生成带有托管 Blazor 程序的 ASP.NET Core 服务端程序，咱们勾上。 - 咱们将
BlazorToDo.Server设为启动项，而后启动，应该能看到Hello, world!
到这里 Hello Blazor 我的项目创立结束????
我的项目构造
下图是我的项目构造
BlazorToDo.Client
Blazor 我的项目，自身就是一个 Asp.Net Core 我的项目，如果只做前端，就能够间接拿这个我的项目进行公布和部署。之后咱们的分享就围绕着这个我的项目进行。
Program.cs
程序入口，这里与 Web 我的项目的差别就是 Builder 应用了 WebAssemblyHostBuilder。
public static async Task Main(string[] args)
{var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}_Imports.razor
全局导入配置，在这里应用 using 引入后，相当于在所有 razor 文件中都进行了引入。
App.razor
Blazor 的根组件，通过 Program.cs 中的 builder.RootComponents.Add<App> 进行映射。
wwwroot
动态文件寄存地位，用处和 Aps.net core 雷同，外面的 index.html 文件就是主页
<!--index.html-->
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href=""class="reload">Reload</a>
<a class="dismiss">????</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
Program.cs文件中 builder.RootComponents.Add<App>("#app"); 中的选择器 #app 必须能在 index.html 中找到正确的元素，不然程序无奈失常显示。
Pages
业务组件寄存地位，Blazor 都是由组件组成的，页面就是含有路由配置的组件。组件文件扩展名 razor，天然应用的是Razor 语法，以 Index.razor 文件为例，代码如下
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />Razor语法的应用办法在后续分享中重点介绍，此处就不开展了。
Shared
共享组件寄存地位。
BlazorToDo.Server
服务端程序，也是一个 Asp.Net Core 我的项目，能够用他给前端提供 WebAPI，并且承载了 Client 编译的动态文件，如果咱们前后端部署在一起，那么间接公布他即可，这也是构造最简略部署形式。
BlazorToDo.Shared
共享我的项目，这就是 Blazor 绝对于其余前端开发解决方案的最大的劣势，Blazor 的前后端应用了雷同的语言、雷同的框架和语言标准。因而咱们能够把前后端共享的代码放入此我的项目，比方 Dto，罕用组件库，雷同的业务等
代码解析
Counter.razor
点击按钮后数字跳动，成果如下
上面是 Counter.razor 的代码
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{currentCount++;}
}代码很简洁，意思如下
- 申明了变量
currentCount，要在页面上显示能够应用@currentCount，这里应用 @符号从 HTML 转换为 c#。 - html 元素
button中咱们应用@onclick捕捉事件，让他触发IncrementCount函数，这个函数中累加currentCount变量。
对于 razor 语法未来后续分享中重点介绍
次回预报
我将通过一个 ToDo 示例介绍路由的工作原理，Blazor 组件的页面制作方法。