自动导入
Nuxt Kit 提供了一系列实用工具,帮助您使用自动导入。这些函数允许您注册自己的工具、组合函数和 Vue API。
自动导入
Nuxt 自动导入辅助函数、组合函数和 Vue API,以便在应用程序中使用,而无需显式导入它们。根据目录结构,每个 Nuxt 应用程序也可以为自己的组合函数和插件使用自动导入。通过 Nuxt Kit,您还可以添加自己的自动导入。addImports
和 addImportsDir
允许您向 Nuxt 应用程序添加导入。addImportsSources
允许您将从第三方包中列出的导入添加到 Nuxt 应用程序中。
Nuxt 自动导入辅助函数、组合函数和 Vue API,以便在应用程序中使用,而无需显式导入它们。根据目录结构,每个 Nuxt 应用程序也可以为自己的组合函数和插件使用自动导入。组合函数或插件可以使用这些函数。
addImports
向 Nuxt 应用程序添加导入。它使您的导入在 Nuxt 应用程序中可用,而无需手动导入。
类型
function addImports (imports: Import | Import[]): void
interface Import {
from: string
priority?: number
disabled?: boolean
meta?: {
description?: string
docsUrl?: string
[key: string]: any
}
type?: boolean
typeFrom?: string
name: string
as?: string
}
参数
imports
类型: Import | Import[]
必需: true
具有以下属性的对象或对象数组:
from
(必需)
类型:string
模块说明符,用于导入。priority
(可选)
类型:number
默认:1
导入的优先级,如果多个导入具有相同的名称,则优先级最高的将被使用。disabled
(可选)
类型:boolean
如果该导入被禁用。meta
(可选)
类型:object
导入的元数据。meta.description
(可选)
类型:string
导入的简短描述。meta.docsUrl
(可选)
类型:string
文档的 URL。meta[key]
(可选)
类型:any
额外的元数据。type
(可选)
类型:boolean
如果该导入是纯类型导入。typeFrom
(可选)
类型:string
在生成类型声明时使用此作为导入说明。name
(必需)
类型:string
要检测的导入名称。as
(可选)
类型:string
作为此名称进行导入。
示例
// https://github.com/pi0/storyblok-nuxt
import { defineNuxtModule, addImports, createResolver } 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" })
);
}
})
addImportsDir
从目录向 Nuxt 应用程序添加导入。它将自动导入目录中的所有文件,并使它们在 Nuxt 应用程序中可用,而无需手动导入。
类型
function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }): void
参数
dirs
类型: string | string[]
必需: true
一个字符串或字符串数组,表示要导入的目录的路径。
options
类型: { prepend?: boolean }
默认: {}
传递给导入的选项。如果 prepend
设置为 true
,导入将被添加到导入列表的前面。
示例
// https://github.com/vueuse/motion/tree/main/src/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'))
},
})
addImportsSources
向 Nuxt 应用程序添加列出的导入。
类型
function addImportsSources (importSources: ImportSource | ImportSource[]): void
interface Import {
from: string
priority?: number
disabled?: boolean
meta?: {
description?: string
docsUrl?: string
[key: string]: any
}
type?: boolean
typeFrom?: string
name: string
as?: string
}
interface ImportSource extends Import {
imports: (PresetImport | ImportSource)[]
}
type PresetImport = Omit<Import, 'from'> | string | [name: string, as?: string, from?: string]
参数
importSources
类型: ImportSource | ImportSource[]
必需: true
具有以下属性的对象或对象数组:
imports
(必需)
类型:PresetImport | ImportSource[]
必需:true
一个对象或对象数组,内容可以是导入名称、导入对象或导入源。from
(必需)
类型:string
模块说明符,用于导入。priority
(可选)
类型:number
默认:1
导入的优先级,如果多个导入具有相同的名称,则优先级最高的将被使用。disabled
(可选)
类型:boolean
如果该导入被禁用。meta
(可选)
类型:object
导入的元数据。meta.description
(可选)
类型:string
导入的简短描述。meta.docsUrl
(可选)
类型:string
文档的 URL。meta[key]
(可选)
类型:any
额外的元数据。type
(可选)
类型:boolean
如果该导入是纯类型导入。typeFrom
(可选)
类型:string
在生成类型声明时使用此作为导入说明。name
(必需)
类型:string
要检测的导入名称。as
(可选)
类型:string
作为此名称进行导入。
示例
// https://github.com/elk-zone/elk
import { defineNuxtModule, addImportsSources } from '@nuxt/kit'
export default defineNuxtModule({
setup() {
// 从 h3 添加导入,使其自动导入
addImportsSources({
from: 'h3',
imports: ['defineEventHandler', 'getQuery', 'getRouterParams', 'readBody', 'sendRedirect'] as Array<keyof typeof import('h3')>,
})
}
})