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

Auto-imports

Nuxt Kit 提供了一组工具,帮助你使用自动导入功能。这些函数允许你注册自己的工具、组合式函数和 Vue API。

自动导入

Nuxt 自动导入帮助函数、组合式函数和 Vue API,使你可以在应用程序中使用它们,而无需显式导入。根据目录结构,每个 Nuxt 应用程序也可以使用自动导入来处理自己的组合式函数和插件。使用 Nuxt Kit,你还可以添加自己的自动导入。addImportsaddImportsDir 允许你向 Nuxt 应用程序添加导入。addImportsSources 允许你向 Nuxt 应用程序添加列出的来自第三方包的导入。

这些函数旨在用于注册你自己的工具、组合式函数和 Vue API。对于页面、组件和插件,请参考特定的章节:页面组件插件

Nuxt 自动导入帮助函数、组合式函数和 Vue API,使你可以在应用程序中使用它们,而无需显式导入。根据目录结构,每个 Nuxt 应用程序也可以使用自动导入来处理自己的组合式函数和插件。组合式函数或插件可以使用这些函数。

addImports

向 Nuxt 应用程序添加导入。它使得你的导入在 Nuxt 应用程序中可用,无需手动导入。

类型

function addImports (imports: Import | Import[]): void

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

参数

imports

类型: Import | Import[]

必填: true

具有以下属性的对象或对象数组:

  • from(必填)
    类型: string
    要从中导入的模块规范符。
  • priority(可选)
    类型: number
    默认值: 1
    导入的优先级,如果多个导入具有相同的名称,则使用优先级最高的导入。
  • disabled(可选)
    类型: boolean
    如果此导入被禁用。
  • meta(可选)
    类型: object
    导入的元数据。
  • meta.description(可选)
    类型: string
    导入的简短描述。
  • meta.docsUrl(可选)
    类型: string
    文档的 URL。
  • meta[key](可选)
    类型: any
    附加的元数据。
  • type(可选)
    类型: boolean
    如果此导入是纯类型导入。
  • typeFrom(可选)
    类型: string
    生成类型声明时使用的来源。
  • name(必填)
    类型: string
    要检测的导入名称。
  • as(可选)
    类型: string
    导入的别名。

示例

// https://github.com/pi0/storyblok-nuxt
import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const names = [
      "useStoryblok",
      "useStoryblokApi",
      "useStoryblokBridge",
      "renderRichText",
      "RichTextSchema"
    ];

    names.forEach((name) =>
      addImports({ name, as: name, from: "@storyblok/vue" })
    );
  }
})

addImportsDir

将目录中的导入添加到 Nuxt 应用程序。它将自动导入目录中的所有文件,并使它们在 Nuxt 应用程序中可用,无需手动导入。

类型

function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void

参数

dirs

类型: string | string[]

必填: true

字符串或字符串数组,包含要从中导入的目录的路径。

options

类型: { prepend?: boolean }

默认值: {}

传递给导入的选项。如果 prepend 设置为 true,则导入将被置于导入列表的前面。

示例

// https://github.com/vueuse/motion/tree/main/src/nuxt
import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@vueuse/motion',
    configKey: 'motion',
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)
    addImportsDir(resolver.resolve('./runtime/composables'))
  },
})

addImportsSources

向 Nuxt 应用程序添加列出的导入。

类型

function addImportsSources (importSources: ImportSource | ImportSource[]): void

interface Import {
  from: string
  priority?: number
  disabled?: boolean
  meta?: {
    description?: string
    docsUrl?: string
    [key: string]: any
  }
  type?: boolean
  typeFrom?: string
  name: string
  as?: string
}

interface ImportSource extends Import {
  imports: (PresetImport | ImportSource)[]
}

type PresetImport = Omit<Import, 'from'> | string | [name: string, as?: string, from?: string]

参数

importSources

类型: ImportSource | ImportSource[]

必填: true

具有以下属性的对象或对象数组:

  • imports(必填)
    类型: PresetImport | ImportSource[]
    必填: true
    对象或对象数组,可以是导入名称、导入对象或导入源。
  • from(必填)
    类型: string
    要从中导入的模块规范符。
  • priority(可选)
    类型: number
    默认值: 1
    导入的优先级,如果多个导入具有相同的名称,则使用优先级最高的导入。
  • disabled(可选)
    类型: boolean
    如果此导入被禁用。
  • meta(可选)
    类型: object
    导入的元数据。
  • meta.description(可选)
    类型: string
    导入的简短描述。
  • meta.docsUrl(可选)
    类型: string
    文档的 URL。
  • meta[key](可选)
    类型: any
    附加的元数据。
  • type(可选)
    类型: boolean
    如果此导入是纯类型导入。
  • typeFrom(可选)
    类型: string
    生成类型声明时使用的来源。
  • name(必填)
    类型: string
    要检测的导入名称。
  • as(可选)
    类型: string
    导入的别名。

示例

// https://github.com/elk-zone/elk
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // 添加来自 h3 的导入,使其自动导入
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})