撰寫 Nuxt Layers
Nuxt layers 是一個強大的功能，您可以使用它在 monorepo 內，或從 git 儲存庫或 npm 套件中，分享和重複使用部分 Nuxt 應用程式。 Layers 結構幾乎與標準 Nuxt 應用程式相同，這使其易於撰寫和維護。
最小的 Nuxt layer 目錄應包含一個 nuxt.config.ts 檔案，以表明它是一個 layer。
export default defineNuxtConfig({})
此外，layer 目錄中的某些其他檔案將被 Nuxt 自動掃描並用於擴展此 layer 的專案。
components/*- 擴展預設 componentscomposables/*- 擴展預設 composableslayouts/*- 擴展預設 layoutspages/*- 擴展預設 pagesplugins/*- 擴展預設 pluginsserver/*- 擴展預設伺服器端點和中介軟體utils/*- 擴展預設 utilsnuxt.config.ts- 擴展預設 nuxt 設定app.config.ts- 擴展預設 app 設定
基礎範例
export default defineNuxtConfig({
extends: [
'./base'
]
})
入門範本
為了開始使用，您可以使用 nuxt/starter/layer 範本初始化一個 layer。這將建立一個您可以以此為基礎的基本結構。在終端機中執行此命令以開始使用
npm create nuxt --template layer nuxt-layer
請按照 README 指示進行後續步驟。
發布 Layers
您可以使用遠端來源或 npm 套件來發布和分享 layers。
Git 儲存庫
您可以使用 git 儲存庫來分享您的 Nuxt layer。以下是一些範例
export default defineNuxtConfig({
extends: [
'github:username/repoName', // GitHub Remote Source
'github:username/repoName/base', // GitHub Remote Source within /base directory
'github:username/repoName#dev', // GitHub Remote Source from dev branch
'github:username/repoName#v1.0.0', // GitHub Remote Source from v1.0.0 tag
'gitlab:username/repoName', // GitLab Remote Source example
'bitbucket:username/repoName', // Bitbucket Remote Source example
]
})
GIGET_AUTH=<token> 以提供 token。GIGET_GITHUB_URL=<url> 或 GIGET_GITLAB_URL=<url> 環境變數提供其 URL - 或直接在您的 nuxt.config 中使用 auth 選項進行配置。node_modules/.c12/layer_name/node_modules/)，您的套件管理器無法存取該位置。install: true 來實現。export default defineNuxtConfig({
extends: [
['github:username/repoName', { install: true }]
]
})
npm 套件
您可以將 Nuxt layers 發布為 npm 套件，其中包含您想要擴展的檔案和依賴項。這允許您與他人分享您的設定，在多個專案中使用它，或私下使用它。
若要從 npm 套件擴展，您需要確保模組已發布到 npm 並作為 devDependency 安裝在使用者的專案中。然後您可以使用模組名稱來擴展目前的 nuxt 設定。
export default defineNuxtConfig({
extends: [
// Node Module with scope
'@scope/moduleName',
// or just the module name
'moduleName'
]
})
若要將 layer 目錄發布為 npm 套件，您需要確保 package.json 具有正確填寫的屬性。這將確保在發布套件時包含這些檔案。
{
"name": "my-theme",
"version": "1.0.0",
"type": "module",
"main": "./nuxt.config.ts",
"dependencies": {},
"devDependencies": {
"nuxt": "^3.0.0"
}
}
dependencies。 nuxt 依賴項以及任何僅用於在發布前測試 layer 的內容，應保留在 devDependencies 欄位中。現在您可以繼續將模組發布到 npm，無論是公開還是私有。
提示
命名 Layer 別名
自動掃描的 layers（來自您的 ~~/layers 目錄）會自動建立別名。例如，您可以透過 #layers/test 存取您的 ~~/layers/test layer。
如果您想為其他 layers 建立命名 layer 別名，您可以在 layer 的配置中指定名稱。
export default defineNuxtConfig({
$meta: {
name: 'example',
},
})
這將產生一個指向您的 layer 的 #layers/example 別名。
相對路徑和別名
當在 layer 的 components 和 composables 中使用全域別名（例如 ~/ 和 @/）匯入時，請注意這些別名是相對於使用者的專案路徑解析的。作為一種解決方案，您可以使用**相對路徑**來匯入它們，或使用命名 layer 別名。
此外，當在 layer 的 nuxt.config 檔案中使用相對路徑時（nested extends 除外），它們是相對於使用者的專案而不是 layer 解析的。作為一種解決方案，請在 nuxt.config 中使用完整解析的路徑。
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
const currentDir = dirname(fileURLToPath(import.meta.url))
export default defineNuxtConfig({
css: [
join(currentDir, './assets/main.css')
]
})
Nuxt 模組的多 Layer 支援
您可以使用內部陣列 nuxt.options._layers 來支援您的模組的自訂多 layer 處理。
export default defineNuxtModule({
setup(_options, nuxt) {
for (const layer of nuxt.options._layers) {
// You can check for a custom directory existence to extend for each layer
console.log('Custom extension for', layer.cwd, layer.config)
}
}
})
筆記
- 在
_layers陣列中較早的項目具有較高的優先權，並覆蓋後面的項目 - 使用者的專案是
_layers陣列中的第一個項目
深入探討
設定檔載入和 extends 支援由 unjs/c12 處理，使用 unjs/defu 合併，並使用 unjs/giget 支援遠端 git 來源。查看文件和原始碼以了解更多資訊。