自动导入

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

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

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

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

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

观看关于 Nuxt Kit 自动导入工具的 Vue School 视频。

`addImports`

向 Nuxt 应用程序添加导入。它使您的导入在 Nuxt 应用程序中可用，而无需手动导入。

用法

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" })
    );
  }
})

类型

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

参数

imports: 一个对象或对象数组，具有以下属性：

属性	类型	必需	描述
`name`	`string`	`true`	要检测的导入名称。
`from`	`string`	`true`	要从中导入的模块说明符。
`priority`	`number`	`false`	导入的优先级；如果多个导入具有相同的名称，将使用优先级最高的导入。
`disabled`	`boolean`	`false`	如果此导入被禁用。
`meta`	`Record<string, any>`	`false`	导入的元数据。
`type`	`boolean`	`false`	如果此导入是纯类型导入。
`typeFrom`	`string`	`false`	在生成类型声明时使用此作为 `from` 值。
`as`	`string`	`false`	以此名称导入。

`addImportsDir`

从目录向 Nuxt 应用程序添加导入。它将自动导入目录中的所有文件，并使它们在 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'))
  },
})

类型

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

参数

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

`addImportsSources`

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

用法

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

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

类型

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

参数

importSources: 一个对象或对象数组，具有以下属性：

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

※此页面是 Nuxt.js 官方文档的非官方翻译页面。

官方文档中的相应页面在此处：
https://nuxt.com/docs/3.x/api/kit/autoimports