Layers

Layers 和擴展支援是 Nuxt 的核心功能之一。您可以擴展預設的 Nuxt 應用程式，以重複使用元件、工具程式和設定。Layers 結構幾乎與標準 Nuxt 應用程式完全相同，這使得它們易於編寫和維護。

使用案例

• 使用 nuxt.config 和 app.config 在專案之間共享可重複使用的設定預設
• 使用 components/ 目錄建立元件庫
• 使用 composables/ 和 utils/ 目錄建立工具程式和組合式函式庫
• 建立 Nuxt 模組預設
• 在專案之間共享標準設定
• 建立 Nuxt 主題
• 透過實作模組化架構並在大型專案中支援領域驅動設計 (DDD) 模式，來增強程式碼組織。

用法

預設情況下，專案中位於 ~~/layers 目錄中的任何 layers 都會自動註冊為專案中的 layers。

此外，將會自動為每個 layer 的 srcDir 建立具名的 layer 別名。例如，您將能夠透過 #layers/test 存取 ~~/layers/test layer。

此外，您可以透過將 extends 屬性新增至您的 nuxt.config 檔案，從 layer 擴展。

export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

如果您從私有 GitHub 儲存庫擴展，您也可以傳遞身份驗證令牌

export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

Nuxt 使用 unjs/c12 和 unjs/giget 來擴展遠端 layers。查看文件以獲取更多資訊和所有可用的選項。

範例