自动导入
Nuxt Kit 提供了一组实用工具,帮助你使用自动导入。这些函数允许你注册自己的工具函数、组合函数和 Vue API。
Nuxt 自动导入帮助函数、组合函数和 Vue API,使你可以在整个应用中使用它们,无需显式导入。基于目录结构,每个 Nuxt 应用也可以为自己的组合函数和插件使用自动导入。
使用 Nuxt Kit 你还可以添加自己的自动导入。addImports 和 addImportsDir 允许你向 Nuxt 应用添加导入。addImportsSources 允许你从第三方包添加列出的导入到 Nuxt 应用。
这些工具由 unimport 提供支持,它是 Nuxt 中使用的底层自动导入机制。
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 | 可为导入名称、导入对象或导入源的对象或对象数组。 |