Blazor-Blazor WebAssmbly项目结构（上）
原创
Blazor-Blazor WebAssmbly项目结构（上）
原创
创建项目
今天我们来创建一个BlazorWebAssmbly项目，来看看项目结构是如何得，我们创建带模板得项目，会创建出一个demo，来看看项目结构。
创建的项目可以直接启动运行，首次启动会看见加载的过程，这个过程是正在下载.NET的捆绑包等资源
项目结构
我们可以看到如下的整体项目结构，我们可以一级一级来看看文件都有什么作用
Program.cs
这个文件相信大家都很熟悉了，是项目的入口函数，我们看看文件里写的内容都有什么作用，具体每段的解释已经写在注释里了，供同学参考
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
namespace BlazorApp1
{
public class Program
{
public static async Task Main(string[] args)
{
//运行 Blazor 的主机对象和其它默认配置
var builder = WebAssemblyHostBuilder.CreateDefault(args);
//表示在根组件集合中添加 App.razor 组件，
//并将 App.razor 组件中的内容在index.html 文件的id=”app”的<div>元素中呈现
builder.RootComponents.Add<App>("#app");
//表示在根组件集合中添加 HeadOutlet 组件，
该组件是 Blazor 提供的内置组件，用于呈现 PageTitle 和 HeadContent 组件提供的内容。
builder.RootComponents.Add<HeadOutlet>("head::after");
//注册服务
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
//启动项目
await builder.Build().RunAsync();
}
}
}在上面的代码中存在#app和head::after熟悉JS的同学们可能已经猜到了这个是选择器的作用
#app 表示选择id为app的元素
head::after 表示选择head标记底部
launchSettings.json
配置应用程序在开发环境中运行和调试使用的端口号及启动方式，在开发环境中使用；发布到生产环
境中不需要此配置文件。
我们从外层至内层来看看各个配置项的作用
$schema
指定json使用的标准
iisSettings
用于对 IIS 和 IIS Express 使用的端口号、windowsAuthentication 和 anonymousAuthentication 进行配置
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:16708",
"sslPort": 44358
}1.windowsAuthentication：是否启用 Windows 身份验证
2.anonymousAuthentication：是否启用匿名身份验证
3.applicationUrl：设置应用程序使用 IIS Express 运行时访问 http 协议的 URL 地址和端口号
4.sslPort：用于 SSL 安全访问的端口号
profiles
配置项目的启动方式，可配置 http、https 或 IIS Express启动方式
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://localhost:5191",
"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:7277;http://localhost:5191",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}http，https默认启动的是 Kestrel 服务器
1.commandName：
IISExpress：启动 IIS Express 运行应用程序。
Project：启动 ASP.NET Core 内置的 Kestrel 服务器。
2.launchBrowser：设置在应用程序运行或调试时是否自动打开默认浏览器访问
3.applicationUrl：配置访问应用程序的 URL 地址，多个 URL 地址使用分号隔开。
4.inspectUri：在 Blazor WebAssembly 应用程序上启用调试的 URL 地址。
5.dotnetRunMessages：使用 dotnet run 命令运行项目时，是否显示反馈信息。
6.environmentVariables：以键/值对的方式配置环境变量，"ASPNETCORE_ENVIRONMENT": "Development"表示当前是开发环境
wwwroot 文件夹
默认存放静态文件的，默认使用 wwwroot 文件夹存放静态文件，如*.css、*.js、*.html 文件、图片、音视频等都是静态文件，静态文件不需要编译即可运行
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
