1. 第一種建立Blazor應用程式的方式。在Visual Studio 2022啟動介面中選擇「建立新專案」,如下圖。
圖2-5
2. 第二種建立Blazor應用程式的方式是。在Visual Studio 2022啟動介面中選擇「繼續但無需程式碼」,然後在Visual Studio 2022的主介面中選擇選單-->檔案-->新建-->專案。如下圖。
圖2-6
3. 在彈出的「建立新專案」的對話方塊中做如下選擇。
圖2-7
4.在彈出的「設定新專案」的對話方塊中,如下圖,在「專案名稱」輸入框中,輸入「BlazorAppDemo」。然後使用滑鼠點選「下一步」按鈕。
圖2-8
5. 在彈出的「其他資訊」的對話方塊,如下圖。在「框架」下拉框中,選擇「NET 6.0(長期支援)」。其他值選擇預設值即可。然後使用滑鼠點選「建立」按鈕。
圖2-9
6. Visual Studio 20222使用預設模板建立了一個ASP.NET Core Blazor專案。我們剛才通過輸入一個專案名稱並選擇了幾個選項,建立了一個Web應用程式。這是一個簡單的入門專案,專案結構如下圖。
圖2-10
7. 我們開啟「解決方案資源管理器」,可以發現Blazor專案跟之前的ASP.NET Core Mvc或Razor Page專案的結構差不多。下面來分別介紹一下主要的幾個檔案與目錄。
1) Data 資料夾:包含 WeatherForecast 類和 WeatherForecastService 的實現,它們嚮應用的FetchData元件提供範例天氣資料。
2) Pages資料夾:包含構成Blazor應用的各種路由元件/頁面(.razor)和 Blazor Server 應用的根Razor頁面。每個頁面的路由由頁面中頂部的 @page指令來指定。該目錄下包括以下元件:
3) Shared 資料夾:包含以下共用元件和樣式表:
4) wwwroot:存放靜態檔案的資料夾,包含應用程式的公共靜態檔案,這些檔案包括網站使用的CSS樣式表、影象和JavaScript 檔案
5) _Imports.razor:包括要包含在應用元件 (.razor) 中的常見 Razor 指令,如用於名稱空間的 @using 指令。
6) App.razor:是Blazor應用程式的根元件,使用Router元件來設定使用者端路由。Router元件會截獲瀏覽器所發出的請求,並導航到相匹配的地址頁面。
7) appsettings.json 和環境應用設定檔案:用於應用程式範圍的設定設定。
8) Program.cs:是啟動伺服器的應用程式的入口點,用於設定 ASP.NET Core 主機幷包含應用的啟動邏輯,其中包括設定應用程式服務和請求處理管道設定:
9)BlazorAppDemo.csproj檔案定義了應用程式專案及其依賴項,可以通過雙擊解決方案資源管理器中的BlazorAppDemo專案節點來檢視。
10)Properties目錄中的launchSettings.json檔案為本地開發環境定義了不同的組態檔設定。在專案建立時自動分配的埠號就儲存在此檔案中。
{ "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:24757", "sslPort": 44336 } }, "profiles": { "BlazorAppDemo": { "commandName": "Project", "dotnetRunMessages": true, "launchBrowser": true, "applicationUrl": "https://localhost:7110;http://localhost:5110", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } } }