專案的複製與堆疊 (Layers)
想像一下，您正在進行一個新專案，但發現很多設定、元件、工具函式都跟上一個專案一模一樣。難道要全部複製貼上一次嗎？Nuxt 提供了一個更優雅、更強大的解決方案，就是我們今天要學習的 Layers (圖層)。
1. 什麼是 Layers？
您可以把一個 Nuxt 專案想像成是另一個 Nuxt 專案的「擴充包」或「主題包」。您的主專案可以「繼承」這個擴充包裡的所有東西。
例如，您可以建立一個「基礎圖層」專案，裡面放好您最愛的元件庫、常用的工具函式、以及統一的 app.config 設定。然後，您所有新的專案都可以「擴充 (extends)」自這個基礎圖層，直接擁有所有預設好的功能，不用再重新設定一次。
當您擴充一個圖層時，兩個專案的目錄（例如 components/、composables/、pages/）會被「合併」，讓您可以在主專案中直接使用圖層裡的所有資源。
2. Layers 的妙用
這個功能非常靈活，可以用在很多地方：
製作主題 (Themes)
建立一個包含視覺風格（元件、CSS）的主題包，讓不同專案可以快速套用。
共享工具箱 (Shared Utilities)
將您所有專案都會用到的 composables 和 utils 集中在一個圖層，方便共享與維護。
共享設定 (Shared Configs)
將共通的 nuxt.config 或 app.config 設定檔抽離成一個圖層。
大型專案架構
將一個大型專案，依照不同「領域 (Domain)」拆分成多個圖層，讓架構更清晰。
3. 如何使用 Layers？
最核心的設定就在 nuxt.config.ts 的 extends 屬性裡。您可以在這個陣列中，指定要繼承的圖層來源。
來源可以是：
本地的另一個資料夾
一個已安裝的 npm 套件 (例如公司內部的主題包)
甚至是一個公開或私有的 GitHub 專案！
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
// 1. 從本地的另一個資料夾擴充
'../my-base-layer',
// 2. 從一個已安裝的 npm 套件擴充
'@my-company/nuxt-theme',
// 3. 直接從 GitHub 專案擴充！
'github:nuxt-themes/docus#main'
]
})強大功能：一旦設定完成，您主專案裡的資源就會和圖層裡的資源「合併」。例如，您可以在主專案的頁面中，直接使用來自圖層的元件，就好像它本來就在您的專案裡一樣。
實際應用範例
個人開發者場景
- 建立個人專案模板
- 重複使用常用元件
- 快速啟動新專案
- 統一個人品牌風格
團隊開發場景
- 統一技術棧和架構
- 共享元件庫維護
- 跨專案一致性
- 降低維護成本
今日總結
今天我們認識了 Nuxt 的 Layers，一個能大幅提升程式碼複用性和組織性的強大功能。
專案圖層化：像堆疊積木一樣組合專案
透過 extends 屬性，可以繼承其他專案的所有資源
多種應用場景：主題包、工具庫、設定共享
適用於各種規模的專案和團隊需求
靈活的來源支援：本地、npm、GitHub 皆可
支援各種來源形式，滿足不同的開發需求
透過 extends，我們可以像堆疊積木一樣，組合不同的專案圖層，快速打造出功能強大且易於維護的應用程式。這對於個人開發者來說，可以建立自己的「專案模板」；對於團隊來說，則是統一技術棧和共享元件庫的最佳實踐。