最近手癢，正好陽性在家，就打算把代碼再撿起來看看，學習下這些年來都有什麼新東西出現。就看到了微軟出的.Net 7 Blazor相關的內容。 走了一遍微軟官方的教程，發現用處不大，（可能是年紀已高，也可能是斷代太久），所以給這段時間立個小目標，從頭開始學習一下這個Blazor。 有關Blazor Se ...
最近手癢，正好陽性在家，就打算把代碼再撿起來看看，學習下這些年來都有什麼新東西出現。就看到了微軟出的.Net 7 Blazor相關的內容。
走了一遍微軟官方的教程，發現用處不大，（可能是年紀已高，也可能是斷代太久），所以給這段時間立個小目標，從頭開始學習一下這個Blazor。
有關Blazor Server 和Web WebAssembly 的區別已經有大把的人在說，就不再贅述（其實對於新手來說，選定一個研究就是了，沒必要糾結）。
準備工作
- 根據自己的操作系統，從官網下載最新版本的 Visual Studio （我的是Mac Arm64 17.4 版本）；
- 在Visual Studio安裝程式中，將 Web相關的組件都夠選上（因為我已安裝好，不想卸載重裝，就不羅列具體哪些組件了）
- 等待安裝程式完成更新後，即可。
創建項目
- 打開安裝好的Visual Studio，選擇「新建」
- 依次選擇「Web控制台 -- 應用」-->「ASP.NET Core -- Blazor Server應用空 （C#」，點擊繼續
- 目標框架「.Net 7」，取消勾選「高級：配置HTTPS」，點擊繼續
- 輸入項目名稱（這裡我使用“BlazorServerDemo”），選擇位置文件夾（這裡我使用預設），點擊創建
- Visual Studio 會自動打開項目視窗，點擊上方「調試 -- 開始調試」，此時彈出瀏覽器視窗，並顯示 “Hello World”字樣
- 創建項目完成
項目結構
預設自動創建的項目結構：
- Pages 視圖文件，Razor組件
- _Host.cshtml 實現為 Razor 頁面的應用的根頁面，指定根
App組件 (App.razor) 的呈現位置。 - Index.razor Razor組件
- _Host.cshtml 實現為 Razor 頁面的應用的根頁面，指定根
- Properties
- launchSettings.json
- wwwroot 靜態文件
- CSS
- site.css
- CSS
- _Imports.razor 包括要包含在應用組件 (
.razor) 中的常見 Razor 指令，如用於命名空間的 @using 指令。 - App.razor 應用的根組件，用於使用 Router 組件來設置客戶端路由。 appsettings.json 基本應用參數
- appsettings.Development.json
- MainLayout.razor UI 佈局
- Program.cs 應用的入口點，用於設置 ASP.NET Core 主機 並包含應用的啟動邏輯，其中包括服務註冊和請求處理管道配置
自定義創建的其他目錄：
- Data 嚮應用的組件提供示例數據。
- Shared 包含共用組件和樣式表
總結思考
- .razor 文件是Razor組件文件，內涵描述組件的所有內容（HTML以及對應的邏輯代碼）
- Blazor 相對於其他Web框架而言，比較友好的是可以直接使用C#寫頁面邏輯
- 與當前很多應用較廣泛的前端框架（JS語言）類似的組件編寫風格
- 空白模板相對更適合作為Blazor項目的起點，而不是Blazor Server模板
本文來自博客園，作者：Margin22，轉載請註明原文鏈接：https://www.cnblogs.com/skyler/p/17005644.html
.Net Core QQ群：26555711
