Nuxt3 中文课程《实战全栈开发简书》限时优惠

Templates

Nuxt Kit 提供了一组工具,帮助你处理模板。这些函数允许你在开发和构建过程中生成额外的文件。

模板允许在开发和构建过程中生成额外的文件。这些文件将在虚拟文件系统中可用,并可用于插件、布局、组件等。addTemplateaddTypeTemplate 允许你向 Nuxt 应用中添加模板。updateTemplates 允许你重新生成与筛选器匹配的模板。

addTemplate

在构建期间将给定的模板呈现到项目的 buildDir 中。

类型

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
}

参数

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,模板将被写入目标文件。否则,模板仅在虚拟文件系统中使用。

示例

// 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 中,并将其注册为类型。

类型

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
}

参数

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,则忽略此函数。

示例

// 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

重新生成与筛选器匹配的模板。如果未提供筛选器,则重新生成所有模板。

类型

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
}

参数

options

类型: UpdateTemplatesOptions

默认: {}

传递给模板的选项。该对象可以具有以下属性:

  • filter(可选)
    类型: (template: ResolvedNuxtTemplate) => boolean
    一个将使用 template 对象调用的函数。它应该返回一个布尔值,指示是否应重新生成模板。如果未提供 filter,则重新生成所有模板。

示例

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

export default defineNuxtModule({
  setup(options, nuxt) {
    // 当页面之一发生更改时,监视并重新构建路由模板列表
    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'
        })
      }
    })
  }
})