浮動選單遮蔽錨點定位位置 :root { scroll-padding-top: 120px; } 定位至錨點，捲動效果太硬 html { scroll-behavior: smooth; }

輸出運行檔案的方式有兩種：SSR 模式檔案、SSG 模式檔案 SSR 模式檔案：用於提供給 Server 理解，並產出對應的頁面，無法直接從檔案直接讀取各頁面原始碼 npm run build SSG 模式檔案：可以直接從檔案讀取頁面原始碼 # 如果 dist/ 前一版殘留，Nuxt 不一定會清理掉 rm -rf dist npx nuxi generate

Azure service: Static Web Apps 創建 SWA (Static Web Apps) 搜尋 Static Web Apps 服務並進入頁面，點選「Create」 image 建立基本資料 ... Source: GitHub GitHub account: 點選連結 Github

Azure service： Container registries Container instances Create container registry Service 搜尋 Container registries 並進入頁面 image 點選 「Create」 創建 Azure Container Registry image

在開始指令之前，記得先開啟 Docker Desktop，Docker engine 才會啟動哦 接下來要做的步驟如下： 在專案根目錄建立 Dockerfile 檔案 image 建立 Docker Image 在專案根目錄建立 Dockerfile Dockerfile 設置重點

March 15, 2024 | Created 安裝 Visual Studio 2022 至 Microsoft - Visual Studio 官網，選擇 Community 2022 版本下載並安裝 image 安裝 SQL Server 至 Microsoft - SQL Server 官網，選擇 Developer 版本下載並安裝 image

建立 Nuxt3 專案 安裝指令 npx nuxi@latest init <project-name, eg. Nuxt3Project> 進入專案目錄 cd Nuxt3Project 安裝專案資源 npm i

March 20, 2024 | Created 為何需要變更驗證方式 在《01 建立 .NET 相關環境》- 測試 SQL Server 運作 的章節中，我們安裝好 SQL Server 及 SSMS 後，有使用 Windows 驗證登入，測試是否可以成功連線。 不過 Windows 驗證是以 Windows 登入的使用者作為身份，無法提供外部的應用程式訪問。 因此，我們需要改使用 SQL Server 驗證的方式，才能夠管理外部訪問的存取權限。 將 Windows 驗證 改為 SQL Server 驗證

March 18, 2024 | Created 建立專案 開啟 Visual Studio 2022 建立新專案 image 搜尋 vue ，並選擇 Vue and ASP.NET Core 請依需求留意選擇的類型是 JavaScript 或是 TypeScript

March 15, 2024 | Created 安裝 Vue 開啟「命令提示字元」，輸入 npm install vue 安裝 Vue CLI 在「命令提示字元」，輸入 npm install @vue/cli 若需要全域安裝，則輸入 npm install -g @vue/cli Reference

March 15, 2024 | Created 在教學進行前，先開啟「命令提示字元」，輸入 node -v 確認是否已安裝 Node.js 若已安裝，會出現版本號 image 如果已安裝 Node.js 建議跳過此教學，避免安裝 NVM 過程導致版本錯亂

Getter 在上一篇文章，我們談論 public 時有個範例： class Rectangle { public width: number = 100; // 建構式 constructor() { this.width = 50; }

封裝在類別中的主要目的，是為了控制類別中的成員（變數/屬性或函式等）被存取的權限。 一般我們會在宣告變數/屬性或函式的最前方加上 存取修飾子： class Counter { private count: number = 0; } 語法中的 private 就是存取修飾子。 存取修飾子

我們都知道 Class 是 JavaScript 的語法糖，先來複習一下 MDN 對 Class 的說明： Classes are a template for creating objects. 類別是一個可以 創建物件 的模板 而經由類別創建的物件，有個特定的名稱叫做實體（Instance）。 事實上，概念和前一篇 Interface 有個相似之處－兩者都可以進行抽象化的行為。 若忘記抽象化是什麼，可以再複習一次 型別化名 篇章針對抽象化的說明與範例。

我們在 <Day04：型別系統 - 明文型別 Literal Types 與 型別化名> 聊過 型別化名。 型別化名：主要的功用在於 簡化程式碼 及 抽象化型別（Type Abstraction）。 而 介面 宣告，與型別化名的功用相同，是另一種 抽象化 物件型別的方法。 來看個簡單的範例： interface Rectangle { width: number;

我們在上一篇 泛用化名 有看到一個範例： type Dictionary<T> = { [prop: string]: T }; 其中 [prop: string] 就是索引型別的使用方式。 我們先用熟悉的 型別化名 來瞭解： type MyObjectType = {

泛用型別可以視為是將 型別化名 進行 參數化 的行為，任何型別都可以轉換成泛用型別。目的是為了讓 型別化名 能更彈性的運用。 簡單看個範例： type Identity<T> = T; 在 Identity<T> 中的 T，我們視為是泛用型別 宣告時的參數，稱為型別參數（Type Parameter）。 若還是很難懂，可以想成 函式 宣告時的參數 function call(T){}，呼叫時可以帶入各種變數值。 function callFunction(T) {

通常用在型別化名的時候，複合型別包含： union：聯集型別 intersection：交集型別 首先，這裡所提到的 聯集 與 交集 的概念，與數學集合論所學到的概念不一樣，想了解可以先跳至 比較數學集合與型別集合。 聯集型別 Union Type 將型別進行聯集（|），來看個簡單的範例：

never：各種型別的 subtype。假設型別註記為 boolean ，還是有可能被型別推論為 never ，表示這個變數或函式有一些條件狀況可能未被處理。 any：通常只在導入 TS 初步除錯時使用，開發專案時 盡量別！使！用！ unknown：似 any ，但 unknown 型別的變數值，只能指派給 any 或 unknown 型別的變數。 -- Never 通常有兩種情況會使用此型別： 無法跳脫函式

Literal 究竟是什麼 Literal 直接翻譯是 字面上的，所以 Literal Type 白話一些就是指 字面上的型別。 也就是字面上顯示的格式，在你看來是 什麼 型別，它就是 什麼 的明文型別。 進一步來看，Object, Function, Array, Tuple, Enum，各自都是一個型別，但廣義來說，都是 明文型別 的表示方式。 簡單來說，明文型別 可以視為是眾多表示方式的集合體。 直接看個範例，當我這樣宣告一個物件：