層
Nuxt 提供了一個強大的系統，允許你擴充套件預設檔案、配置等等。
Nuxt 的核心功能之一是層和擴充套件支援。你可以擴充套件預設的 Nuxt 應用程式以重用元件、實用工具和配置。層的結構幾乎與標準 Nuxt 應用程式相同，這使得它們易於編寫和維護。
用例
- 使用
nuxt.config和app.config在專案之間共享可重用配置預設 - 使用
app/components/目錄建立元件庫 - 使用
app/composables/和app/utils/目錄建立實用工具和組合式函式庫 - 建立 Nuxt 模組預設
- 在專案之間共享標準設定
- 建立 Nuxt 主題
- 透過在大型專案中實施模組化架構和支援領域驅動設計 (DDD) 模式來增強程式碼組織。
使用
預設情況下，你的專案中的 ~~/layers 目錄中的任何層都將自動註冊為你的專案中的層。
層自動註冊在 Nuxt v3.12.0 中引入。
此外，每個層的 srcDir 的命名層別名將自動建立。例如，你將能夠透過 #layers/test 訪問 ~~/layers/test 層。
命名層別名在 Nuxt v3.16.0 中引入。
此外，你可以透過將 extends 屬性新增到你的 nuxt.config 檔案中來從一個層擴充套件。
nuxt.config.ts
export default defineNuxtConfig({
extends: [
// Extend from a local layer
'../base',
// Extend from an installed npm package
'@my-themes/awesome',
// Extend from a git repository
'github:my-themes/awesome#v1',
],
})
如果你正在從私有 GitHub 倉庫擴充套件，你也可以傳遞一個身份驗證令牌
nuxt.config.ts
export default defineNuxtConfig({
extends: [
// per layer configuration
['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
],
})
你可以透過在層源旁邊的選項中指定別名來覆蓋層的別名。
nuxt.config.ts
export default defineNuxtConfig({
extends: [
[
'github:my-themes/awesome',
{
meta: {
name: 'my-awesome-theme',
},
},
],
],
})
Nuxt 使用unjs/c12等等unjs/giget用於擴充套件遠端層。檢視文件以獲取更多資訊和所有可用選項。
層優先順序
使用多個層時，瞭解它們如何相互覆蓋非常重要
extends中的層 - 靠前的條目具有更高的優先順序（第一個覆蓋第二個）- 從
~~/layers目錄中自動掃描的本地層按字母順序排列（Z 覆蓋 A） - 你的專案在堆疊中具有最高優先順序 - 它將始終覆蓋其他層
nuxt.config.ts
export default defineNuxtConfig({
extends: [
// Highest priority (among extends)
'../base',
// Medium priority
'@my-themes/awesome',
// Lower priority
'github:my-themes/awesome#v1',
],
// Your project has the highest priority
})
這意味著如果多個層定義相同的元件、配置或檔案，則將使用優先順序更高的那個。