自动导入
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 | 是 | 要检测的导入名称。 |
from | string | 是 | 要导入的模块说明符。 |
priority | number | 否 | 导入的优先级;如果多个导入具有相同名称,将使用优先级最高的导入。 |
disabled | boolean | 否 | 如果此导入被禁用。 |
meta | Record<string, any> | 否 | 导入的元数据。 |
type | boolean | 否 | 如果此导入是纯类型导入。 |
typeFrom | string | 否 | 在生成类型声明时将其用作 from 值。 |
as | string | 否 | 以此名称导入。 |
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[] | 是 | 一个字符串或字符串数组,表示要导入的目录的路径。 |
options | { prepend?: boolean } | 否 | 要传递给导入的选项。如果 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 | 是 | 要导入的模块说明符。 |
imports | PresetImport | ImportSource[] | 是 | 一个对象或对象数组,可以是导入名称、导入对象或导入源。 |