组件
Nuxt Kit 提供了一套实用工具来帮助您处理组件。您可以全局或局部注册组件,也可以添加要扫描的组件目录。
组件是您 Nuxt 应用程序的构建块。它们是可重用的 Vue 实例,可用于创建用户界面。在 Nuxt 中,来自组件目录的组件默认会自动导入。然而,如果您需要从其他目录导入组件或希望根据需要选择性导入组件,@nuxt/kit
提供了 addComponentsDir
和 addComponent
方法。这些工具允许您自定义组件配置,以更好地满足您的需求。
addComponentsDir
注册一个目录以扫描组件,并仅在使用时导入。请记住,除非您指定 global: true
选项,否则这不会全局注册组件。
类型
async function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void
interface ComponentsDir {
path: string
pattern?: string | string[]
ignore?: string[]
prefix?: string
pathPrefix?: boolean
enabled?: boolean
prefetch?: boolean
preload?: boolean
isAsync?: boolean
extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
global?: boolean
island?: boolean
watch?: boolean
extensions?: string[]
transpile?: 'auto' | boolean
}
// 如果需要,您可以扩展此接口(导出自 `@nuxt/schema`)
interface ComponentMeta {
[key: string]: unknown
}
interface Component {
pascalName: string
kebabName: string
export: string
filePath: string
shortPath: string
chunkName: string
prefetch: boolean
preload: boolean
global?: boolean
island?: boolean
mode?: 'client' | 'server' | 'all'
priority?: number
meta?: ComponentMeta
}
参数
dir
类型: ComponentsDir
必需: true
一个具有以下属性的对象:
path
(必需)
类型:string
指向您组件的目录的路径(绝对路径或相对路径)。 您可以使用 Nuxt 别名 (~ 或 @) 来引用项目内部的目录,或直接使用类似于 require 的 npm 包路径。pattern
(可选)
类型:string | string[]
接受在指定路径上运行的模式。ignore
(可选)
类型:string[]
忽略在指定路径上运行的模式。prefix
(可选)
类型:string
用此字符串为所有匹配的组件添加前缀。pathPrefix
(可选)
类型:boolean
按路径为组件名称添加前缀。enabled
(可选)
类型:boolean
如果设置为true
,则忽略扫描此目录。prefetch
(可选)
类型:boolean
这些属性(prefetch/preload)在生产环境中用于配置 Webpack 如何通过其魔术注释处理带有 Lazy 前缀的组件。 了解更多信息请参见 webpack 文档preload
(可选)
类型:boolean
这些属性(prefetch/preload)在生产环境中用于配置 Webpack 如何通过其魔术注释处理带有 Lazy 前缀的组件。 了解更多信息请参见 webpack 文档isAsync
(可选)
类型:boolean
此标志指示,无论是否使用 Lazy 前缀,组件都应异步加载(使用单独的代码块)。extendComponent
(可选)
类型:(component: Component) => Promise<Component | void> | (Component | void)
将为目录中找到的每个组件调用的函数。它接受一个组件对象并应返回一个组件对象或一个解析为组件对象的 Promise。global
(可选)
类型:boolean
默认:false
如果启用,则注册组件以全局可用。island
(可选)
类型:boolean
如果启用,则注册组件为 islands。watch
(可选)
类型:boolean
监视指定路径的更改,包括文件添加和文件删除。extensions
(可选)
类型:string[]
Nuxt 构建器支持的扩展名。transpile
(可选)
类型:'auto' | boolean
使用 build.transpile 转换指定路径。如果设置为'auto'
,如果路径中包含node_modules/
,它将设置transpile: true
。
opts
必需: false
prepend
(可选)
类型:boolean
如果设置为true
,则目录将通过unshift()
添加到数组的开头,而不是使用push()
。
addComponent
注册一个组件以便自动导入。
类型
async function addComponent (options: AddComponentOptions): void
interface AddComponentOptions {
name: string,
filePath: string,
pascalName?: string,
kebabName?: string,
export?: string,
shortPath?: string,
chunkName?: string,
prefetch?: boolean,
preload?: boolean,
global?: boolean,
island?: boolean,
mode?: 'client' | 'server' | 'all',
priority?: number,
}
参数
options
类型: AddComponentOptions
必需: true
一个具有以下属性的对象:
name
(必需)
类型:string
组件名称。filePath
(必需)
类型:string
组件的路径。pascalName
(可选)
类型:pascalCase(options.name)
Pascal 大小写组件名称。如果未提供,则将根据组件名称生成。kebabName
(可选)
类型:kebabCase(options.name)
Kebab 大小写组件名称。如果未提供,则将根据组件名称生成。export
(可选)
类型:string
默认:'default'
指定命名导出或默认导出。如果未提供,则将设置为'default'
。shortPath
(可选)
类型:string
组件的短路径。如果未提供,则将根据组件路径生成。chunkName
(可选)
类型:string
默认:'components/' + kebabCase(options.name)
组件的代码块名称。如果未提供,则将根据组件名称生成。prefetch
(可选)
类型:boolean
这些属性(prefetch/preload)在生产环境中用于配置 Webpack 如何通过其魔术注释处理带有 Lazy 前缀的组件。 了解更多信息请参见 webpack 文档preload
(可选)
类型:boolean
这些属性(prefetch/preload)在生产环境中用于配置 Webpack 如何通过其魔术注释处理带有 Lazy 前缀的组件。 了解更多信息请参见 webpack 文档global
(可选)
类型:boolean
默认:false
如果启用,则注册组件以全局可用。island
(可选)
类型:boolean
如果启用,则注册组件为 island。您可以在<NuxtIsland/>
组件描述中了解有关 islands 的更多信息。mode
(可选)
类型:'client' | 'server' | 'all'
默认:'all'
此选项指示组件是否应在客户端、服务器或两者上呈现。默认情况下,它将在客户端和服务器上都呈现。priority
(可选)
类型:number
默认:1
组件的优先级,如果多个组件具有相同的名称,则使用优先级最高的组件。