自动导入

Nuxt 自动导入辅助函数、组合式函数和 Vue API，以便在您的应用程序中使用，而无需显式导入它们。基于目录结构，每个 Nuxt 应用程序也可以为其自己的组合式函数和插件使用自动导入。使用 Nuxt Kit，您还可以添加自己的自动导入。addImports 和 addImportsDir 允许您将导入添加到 Nuxt 应用程序。addImportsSources 允许您将第三方包中列出的导入添加到 Nuxt 应用程序。

这些函数旨在注册您自己的实用程序、组合式函数和 Vue API。对于页面、组件和插件，请参阅特定部分：页面、组件、插件。

Nuxt 自动导入辅助函数、组合式函数和 Vue API，以便在您的应用程序中使用，而无需显式导入它们。基于目录结构，每个 Nuxt 应用程序也可以为其自己的组合式函数和插件使用自动导入。组合式函数或插件可以使用这些函数。

观看有关自动导入 Nuxt Kit 实用程序的 Vue School 视频。

`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
在生成类型声明时使用此项作为 from。
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
在生成类型声明时使用此项作为 from。
name (必需)
类型: string
要检测的导入名称。
as (可选)
类型: string
导入为此名称。

示例

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

export default defineNuxtModule({
  setup() {
    // add imports from h3 to make them autoimported
    addImportsSources({
      from: 'h3',
      imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
    })
  }
})

兼容性

Nuxt Kit 提供了一组实用工具，可帮助您检查模块与不同 Nuxt 版本的兼容性。

组件

Nuxt Kit 提供了一组实用工具，可帮助您处理组件。您可以全局或本地注册组件，还可以添加要扫描组件的目录。