v3.17

自动导入

Source
Nuxt Kit 提供了一组实用程序来帮助你使用自动导入。这些函数允许你注册自己的实用程序、可组合函数和 Vue API。

Nuxt 自动导入辅助函数、可组合项和 Vue API，以便在你的应用中使用，而无需显式导入它们。基于目录结构，每个 Nuxt 应用都可以使用自动导入来导入自己的可组合项和插件。

¥Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own composables and plugins.

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

¥With Nuxt Kit you can also add your own auto-imports. addImports and addImportsDir allow you to add imports to the Nuxt application. addImportsSources allows you to add listed imports from 3rd party packages to the Nuxt application.

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

¥These utilities are powered by unimport, which provides the underlying auto-import mechanism used in Nuxt.

这些函数用于注册你自己的实用程序、可组合组件和 Vue API。对于页面、组件和插件，请参阅以下具体章节：Pages、Components、Plugins。
观看 Vue School 视频，了解如何自动导入 Nuxt Kit 实用程序。¥Watch Vue School video about Auto-imports Nuxt Kit utilities.

addImports

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

¥Add imports to the Nuxt application. It makes your imports available in the Nuxt application without the need to import them manually.

用法

¥Usage

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

类型

¥Type

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

参数

¥Parameters

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

¥imports: An object or an array of objects with the following properties:

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

addImportsDir

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

¥Add imports from a directory to the Nuxt application. It will automatically import all files from the directory and make them available in the Nuxt application without the need to import them manually.

用法

¥Usage

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'))
  },
})

类型

¥Type

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

参数

¥Parameters

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

addImportsSources

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

¥Add listed imports to the Nuxt application.

用法

¥Usage

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

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

类型

¥Type

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

参数

¥Parameters

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

¥importSources: An object or an array of objects with the following properties:

属性类型必需描述
fromstringtrue用于导入的模块说明符。
importsPresetImport | ImportSource[] lang="ts"}true可以是导入名称、导入对象或导入源的对象或对象数组。