範本 · Nuxt Kit - Nuxt 框架

範本允許在開發和建置時產生額外的檔案。這些檔案將在虛擬檔案系統中可用，並可用於外掛程式、佈局、組件等。addTemplate 和 addTypeTemplate 允許您將範本新增至 Nuxt 應用程式。updateTemplates 允許您重新產生符合篩選條件的範本。

`addTemplate`

在建置期間將給定的範本渲染到專案 buildDir 中。

類型 (Type)

function addTemplate (template: NuxtTemplate | string): ResolvedNuxtTemplate

interface NuxtTemplate {
  src?: string
  filename?: string
  dst?: string
  options?: Record<string, any>
  getContents?: (data: Record<string, any>) => string | Promise<string>
  write?: boolean
}

interface ResolvedNuxtTemplate {
  src: string
  filename: string
  dst: string
  options: Record<string, any>
  getContents: (data: Record<string, any>) => string | Promise<string>
  write: boolean
  filename: string
  dst: string
}

參數 (Parameters)

`template`

類型: NuxtTemplate | string

必填: true

範本物件或包含範本路徑的字串。如果提供字串，它將被轉換為範本物件，其中 src 設定為字串值。如果提供範本物件，則必須具有以下屬性

src (選填)
類型: string
範本的路徑。如果未提供 src，則必須改為提供 getContents。
filename (選填)
類型: string
範本的檔案名稱。如果未提供 filename，它將從 src 路徑產生。在這種情況下，src 選項是必填的。
dst (選填)
類型: string
目標檔案的路徑。如果未提供 dst，它將從 filename 路徑和 nuxt buildDir 選項產生。
options (選填)
類型: Options
傳遞給範本的選項。
getContents (選填)
類型: (data: Options) => string | Promise<string>
將使用 options 物件呼叫的函式。它應該傳回字串或解析為字串的 Promise。如果提供了 src，則會忽略此函式。
write (選填)
類型: boolean
如果設定為 true，範本將寫入目標檔案。否則，範本將僅在虛擬檔案系統中使用。

範例 (Examples)

// https://github.com/nuxt/bridge
import { addTemplate, defineNuxtModule } from '@nuxt/kit'
import { defu } from 'defu'

export default defineNuxtModule({
  setup(options, nuxt) {
    const globalMeta = defu(nuxt.options.app.head, {
      charset: options.charset,
      viewport: options.viewport
    })

    addTemplate({
      filename: 'meta.config.mjs',
      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
    })
  }
})

`addTypeTemplate`

在建置期間將給定的範本渲染到專案 buildDir 中，然後將其註冊為類型。

類型 (Type)

function addTypeTemplate (template: NuxtTypeTemplate | string): ResolvedNuxtTemplate

interface NuxtTemplate {
  src?: string
  filename?: string
  dst?: string
  options?: Record<string, any>
  getContents?: (data: Record<string, any>) => string | Promise<string>
}

interface ResolvedNuxtTemplate {
  src: string
  filename: string
  dst: string
  options: Record<string, any>
  getContents: (data: Record<string, any>) => string | Promise<string>
  write: boolean
  filename: string
  dst: string
}

參數 (Parameters)

`template`

類型: NuxtTypeTemplate | string

必填: true

範本物件或包含範本路徑的字串。如果提供字串，它將被轉換為範本物件，其中 src 設定為字串值。如果提供範本物件，則必須具有以下屬性

src (選填)
類型: string
範本的路徑。如果未提供 src，則必須改為提供 getContents。
filename (選填)
類型: string
範本的檔案名稱。如果未提供 filename，它將從 src 路徑產生。在這種情況下，src 選項是必填的。
dst (選填)
類型: string
目標檔案的路徑。如果未提供 dst，它將從 filename 路徑和 nuxt buildDir 選項產生。
options (選填)
類型: Options
傳遞給範本的選項。
getContents (選填)
類型: (data: Options) => string | Promise<string>
將使用 options 物件呼叫的函式。它應該傳回字串或解析為字串的 Promise。如果提供了 src，則會忽略此函式。

範例 (Examples)

// https://github.com/Hebilicious/nuxtpress
import { addTypeTemplate, defineNuxtModule } from "@nuxt/kit"

export default defineNuxtModule({
  setup() {
    addTypeTemplate({
      filename: "types/markdown.d.ts",
      getContents: () => /* ts */`
      declare module '*.md' {
        import type { ComponentOptions } from 'vue'
        const Component: ComponentOptions
        export default Component
      }`
    })
  }
}

`updateTemplates`

重新產生符合篩選條件的範本。如果未提供篩選條件，則將重新產生所有範本。

類型 (Type)

async function updateTemplates (options: UpdateTemplatesOptions): void

interface UpdateTemplatesOptions {
  filter?: (template: ResolvedNuxtTemplate) => boolean
}

interface ResolvedNuxtTemplate {
  src: string
  filename: string
  dst: string
  options: Record<string, any>
  getContents: (data: Record<string, any>) => string | Promise<string>
  write: boolean
  filename: string
  dst: string
}

參數 (Parameters)

`options`

類型: UpdateTemplatesOptions

預設值: {}

傳遞給範本的選項。此物件可以具有以下屬性

filter (選填)
類型: (template: ResolvedNuxtTemplate) => boolean
將使用 template 物件呼叫的函式。它應該傳回布林值，指示是否應重新產生範本。如果未提供 filter，則將重新產生所有範本。

範例 (Example)

// https://github.com/nuxt/nuxt
import { defineNuxtModule, updateTemplates } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    // watch and rebuild routes template list when one of the pages changes
    nuxt.hook('builder:watch', async (event, relativePath) => {
      if (event === 'change') { return }

      const path = resolve(nuxt.options.srcDir, relativePath)
      if (updateTemplatePaths.some(dir => path.startsWith(dir))) {
        await updateTemplates({
          filter: template => template.filename === 'routes.mjs'
        })
      }
    })
  }
})

執行階段設定 (Runtime Config)

Nuxt Kit 提供了一組工具程式，協助您存取和修改 Nuxt 執行階段設定。

Nitro

Nuxt Kit 提供了一組工具程式，協助您使用 Nitro。這些函式讓您新增伺服器處理常式、外掛程式和預先渲染路由。

範本 (Templates)