Blazor入門(一) - 項目結構篇

前言

這裡寫的​

​Blazor​

​内容都是 ​

​WebAssembly​

​的内容,包括之後的文章也是相同

都是官方的内容經過一些提煉和圖檔,你也可以直接看官方文檔​​官方文檔在這​​

版本

.net6

模闆的檔案結構

下面我們來一個個看一看他們的作用

Pages

包含構成​

​Blazor​

​應用的可路由元件/頁面​

​.razor​

​, 每個頁面的路由都是使用​

​@page​

​指令指定的,模闆包含了3個路由檔案,預覽如下

• ​

  ​Counter​

  ​ 元件 ​

  ​Counter.razor​

  ​：實作“計數器”頁面。

• ​FetchData​

  ​FetchData.razor​

  ​：實作“提取資料”頁面。

• ​Index​

  ​Index.razor​

  ​：實作 Home 頁

  

  這裡就是路由了

  

Properties/launchSettings.json

開發環境配置

share

包含共享元件和樣式表

• ​MainLayout​

  ​MainLayout.razor​

  ​：應用的布局元件。

• ​MainLayout.razor.css​

  ​：應用主布局的樣式表。

• ​NavMenu​

  ​NavMenu.razor​

  ​：實作邊欄導航。 包括 ​

  ​NavLink​

  ​NavLink​

  ​，該元件可向其他 Razor 元件呈現導航連結。 ​

  ​NavLink​

  ​ 元件會在系統加載其元件時自動訓示標明狀态，這有助于使用者了解目前顯示的元件。

• ​NavMenu.razor.css​

  ​：應用導航菜單的樣式表。

• ​SurveyPrompt​

  ​SurveyPrompt.razor​

  ​：Blazor 回報元件。

  

wwwroot

應用的web根目錄檔案夾,其中包括​

​應用的公共靜态資産​

​, 包括​

​appsettings.json​

​和配置的環境應用設定檔案. ​

​index.html​

​是頁面應用的根檔案

• 最初請求應用的任何頁面時都會呈現此頁面在響應中傳回

• 此頁面指定

  根App

  元件的呈現位置. 使用

  app

  的

  id

  (

  <div id="app">Loading...</div>

  ) 在 div DOM 元素的位置呈現元件。就是這裡,開始的

  loding...

  就是來自這裡

  

添加到 wwwroot/index.html 檔案的 JavaScript (JS) 檔案應顯示在關閉 标記之前。 在某些情況下，從 JS 檔案加載自定義 JS 代碼的順序非常重要。 例如，確定在 Blazor framework JS 檔案之前包含帶有互操作方法的 JS 檔案。

_Inprots.razor

包括要包含在應用元件(​

​.razor​

​)中的常見Razor指令,如用于命名空間的​

​@using​

​指令

類似與公共命名空間導入,後面就不必在前面加上空間名稱了

App.razor

應用的根元件,用于使用​

​Router元件​

​來設定用戶端路由. ​

​Router元件​

​會截獲浏覽器導航并呈現于請求的位址比對的頁面

Program.cs

應用入口點,用于設定WebAssembly主機

• App 元件是應用的根元件。 對于根元件集合 (​

  ​builder.RootComponents.Add<App>("#app")​

  ​)，使用 app 的 id（​

  ​wwwroot/index.html​

  ​ 中的 ​

  ​<div id="app">Loading...</div>​

  ​）将 App 元件指定為 div DOM 元素
• 添加并配置了服務（例如:​

  ​builder.Services.AddSingleton<IMyDependency, MyDependency>()​

  ​）