撰寫 Nuxt Layers
Nuxt layers 是一個強大的功能，您可以使用它在單一儲存庫中，或從 git 儲存庫或 npm 套件中，分享和重複使用部分的 Nuxt 應用程式。 layers 的結構幾乎與標準 Nuxt 應用程式相同，這使得它們易於撰寫和維護。
一個最小的 Nuxt layer 目錄應包含一個 nuxt.config.ts 檔案，以指示它是一個 layer。
export default defineNuxtConfig({})
此外，layer 目錄中的某些其他檔案將會被 Nuxt 自動掃描，並由擴展此 layer 的專案使用。
components/*- 擴展預設元件composables/*- 擴展預設的 composableslayouts/*- 擴展預設的版面配置pages/*- 擴展預設頁面plugins/*- 擴展預設外掛server/*- 擴展預設伺服器端點和中間件utils/*- 擴展預設工具函式nuxt.config.ts- 擴展預設的 Nuxt 配置app.config.ts- 擴展預設應用程式配置
基本範例
export default defineNuxtConfig({
extends: [
'./base'
]
})
入門範本
要開始使用，您可以使用 nuxt/starter/layer 範本初始化一個 layer。這將建立一個您可以進一步建構的基礎結構。在終端機中執行以下命令以開始使用
npx nuxi init --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> 以提供權杖。GIGET_GITHUB_URL=<url> 或 GIGET_GITLAB_URL=<url> 環境變數提供其 URL，或者直接在您的 nuxt.config 中使用 the auth option 進行配置。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 元件和 composables 中使用別名（例如 ~/ 和 @/）匯入時，請注意別名是相對於使用者的專案路徑解析的。作為一種變通方法，您可以使用相對路徑來匯入它們。我們正在研究更好的命名 layer 別名解決方案。
此外，當在層（layer）的 nuxt.config 檔案中使用相對路徑時（除了巢狀的 extends 之外），它們會解析為相對於使用者專案的路徑，而不是層的路徑。作為一種變通方法，請在 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 模組的多層支援
您可以使用內部的 nuxt.options._layers 陣列來支援您的模組的自訂多層處理。
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 來源。請查閱文件和原始碼以了解更多資訊。