VS自帶的Blazor模板介紹

需要升級VS2019以及.NET Core到最新版（具體的最低支持，我已經(jīng)忘了，總是越新支持的就越好），以更好的支持自己開發(fā)Blazor項(xiàng)目。

使用VS創(chuàng)建Blazor WebAssembly項(xiàng)目

• 搜索Blazor模板

• 選擇Blazor WebAssembly App模板

• 項(xiàng)目實(shí)例

• 項(xiàng)目實(shí)例

BlazorApp.Shared：提供最一般的支持，包括各個Model

BlazorApp.Client：依賴BlazorApp.Shared，該項(xiàng)目側(cè)重于Pages功能

BlazorApp.Server：依賴BlazorApp.Shared、BlazorApp.Client，該項(xiàng)目側(cè)重于提供接口功能

BlazorApp.Client

項(xiàng)目結(jié)構(gòu)

從上圖可知 該項(xiàng)目主要包括wwwroot、Pages、Shared三個文件夾，以及_Imports.razor、App.razor、Program.cs這三個單獨(dú)的文件。

wwwroot

這個文件夾和我們ASP.NET Core MVC里的wwwroot基本一致，不過需要注意的是，這個文件夾里面有一個比較重要的文件index.html，它是我們Blazor項(xiàng)目的起點(diǎn)。這個文件里也引用了blazor.webassembly.js，可是我們在項(xiàng)目中沒有看到。這沒關(guān)系，因?yàn)樗鼤蒑icrosoft.AspNetCore.Components.WebAssembly.Build提供，在運(yùn)行編譯的時候會自己出現(xiàn)的。

Shared

這個文件夾里，有三個文件，分別是MainLayout.razor、NavMenu.razor、SurveyPrompt.razor。

• MainLayout是Layout文件，它定義了該項(xiàng)目的基本布局

• NavMenu是Component，它實(shí)現(xiàn)了菜單功能，并對外提供了獨(dú)立而又單一的組件功能

• SurveyPrompt也是Component，它實(shí)現(xiàn)了文件傳入與連接跳轉(zhuǎn)功能，對外也是提供了獨(dú)立而又單一的菜單功能，同時這也是一個帶參的組件 組件功能后續(xù)會詳細(xì)介紹，但是需要提前說明的是，任何組件一經(jīng)對外使用，都是獨(dú)立而又單一的。接下來看一下運(yùn)行后的效果圖：整體的風(fēng)格、左側(cè)的菜單、右側(cè)的鏈接都像我們展示了布局和組件功能

Pages

里面定義了三個.razor文件，這也是模板提供給我的Blazor編寫案例

• Index.razor向我們展示了，組件的調(diào)用

• FetchData.razor向我們展示了Call遠(yuǎn)程API和路由功能（@page "/fetchdata"）

• Counter.razor向我們展示了事件調(diào)用

其他文件

• _Imports.razor，這個文件和我們在ASP.NET Core項(xiàng)目中的_Imports.cshtml文件，沒有什么區(qū)別

• App.razor，這是根組件，里面定義了路由功能、默認(rèn)布局、以及404展示

• Program.cs 在職能上和我們ASP.NET Core項(xiàng)目的Program.cs文件也沒有什么區(qū)別，但是里面定義了Http所要調(diào)用的EndPoint（builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });）

運(yùn)行項(xiàng)目

設(shè)置BlazorApp.Server為啟動項(xiàng)目

下載必須文件如圖所示，我們需要加載6.15M的文件，同時可以看到Blazor的運(yùn)行時信息mono_wasm_runtime_ready。

接下來，我們展開Object來看看其詳細(xì)信息，會看到Object中有太多的依賴程序集。

打開源代碼tab頁，會看到以下幾個文件

• dotnet.wasm文件，打開后，會看到我們前文說過的WebAssembly文本格式的內(nèi)容。

• blazor.webassembly.js，用于下載.NET運(yùn)行時，依賴程序集等，同時還會初始化運(yùn)行應(yīng)用的程序集

• dotnet.3.2.0.js也是我們之前所說的用于調(diào)用C#方法的JS文件

添加頁面

這個比較簡單，如下操作即可接下來的內(nèi)容我們將以此模板為例，進(jìn)行展開討論

總結(jié)

以上是生活随笔為你收集整理的Blazor带我重玩前端(三)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。