自动导入

源文件
Nuxt Kit 提供了一套实用工具来帮助你处理自动导入。这些函数允许你注册自己的工具、可组合项和 Vue API。

Nuxt 自动导入辅助函数、可组合项和 Vue API，可以在你的整个应用程序中使用，而无需显式导入。根据目录结构，每个 Nuxt 应用程序也可以为其自己的可组合项和插件使用自动导入。

通过 Nuxt Kit，你还可以添加自己的自动导入。addImports 和 addImportsDir 允许你将导入添加到 Nuxt 应用程序。addImportsSources 允许你将第三方包中列出的导入添加到 Nuxt 应用程序。

这些实用工具由unimport提供支持，它提供了 Nuxt 中使用的底层自动导入机制。

这些函数旨在注册你自己的工具、可组合项和 Vue API。对于页面、组件和插件，请参阅特定章节：页面、组件、插件。
观看 Vue School 关于自动导入 Nuxt Kit 实用工具的视频。

addImports

将导入添加到 Nuxt 应用程序。它使你的导入在 Nuxt 应用程序中可用，而无需手动导入它们。

使用

import { addImports, defineNuxtModule } 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' }),
    )
  },
})

类型

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

参数

imports：一个对象或一个包含以下属性的对象数组

属性类型必需描述
namestringtrue要检测的导入名称。
fromstringtrue要从其中导入的模块说明符。
prioritynumberfalse导入的优先级；如果多个导入具有相同的名称，将使用优先级最高的那个。
disabledbooleanfalse此导入是否禁用。
metaRecord<string, any>false导入的元数据。
类型booleanfalse此导入是否是纯类型导入。
typeFromstringfalse在生成类型声明时，将其用作 from 值。
asstringfalse以此名称导入。

addImportsDir

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

使用

import { addImportsDir, createResolver, defineNuxtModule } 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'))
  },
})

类型

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

参数

属性类型必需描述
dirsstring | string[]true一个字符串或一个字符串数组，包含要从其中导入的目录路径。
options{ prepend?: boolean }false要传递给导入的选项。如果 prepend 设置为 true，则导入将添加到导入列表的开头。

addImportsSources

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

使用

import { addImportsSources, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addImportsSources({
      from: 'h3',
      imports: [
        'defineEventHandler',
        'getQuery',
        'getRouterParams',
        'readBody',
        'sendRedirect',
      ],
    })
  },
})

类型

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

参数

importSources：一个对象或一个包含以下属性的对象数组

属性类型必需描述
fromstringtrue要从其中导入的模块说明符。
imports (导入)PresetImport | ImportSource[]true一个对象或一个对象数组，可以是导入名称、导入对象或导入源。