透過 100 多個提示學習 Nuxt!

Nuxt 提供了一個強大的系統,讓您可以擴展預設檔案、設定等更多內容。

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

使用案例

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

用法

預設情況下,您專案中 ~/layers 目錄內的任何 layers 都會自動註冊為您專案中的 layers

Layer 自動註冊功能在 Nuxt v3.12.0 中推出

此外,您可以透過將 extends 屬性新增到您的 nuxt.config 檔案中,從一個 layer 擴充。

nuxt.config.ts
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 儲存庫擴充,您也可以傳遞身份驗證令牌

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

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

請在Layer 作者指南中閱讀更多關於 layers 的資訊。
觀看 Learn Vue 關於 Nuxt Layers 的影片。
觀看 Alexander Lichter 關於 Nuxt Layers 的影片。

範例

Content Wind 主題

一個輕量級的 Nuxt 主題,用於建立以 Markdown 驅動的網站。由 Nuxt Content、TailwindCSS 和 Iconify 提供支援。