组件
Nuxt Kit 提供了一组实用工具,帮助您使用组件。您可以全局或本地注册组件,还可以添加要扫描组件的目录。
组件是 Nuxt 应用程序的构建块。它们是可重用的 Vue 实例,可用于创建用户界面。在 Nuxt 中,默认情况下会自动导入来自 components 目录的组件。但是,如果您需要从备用目录导入组件,或者希望根据需要选择性地导入它们,则 @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
}
// You can augment this interface (exported from `@nuxt/schema`) if needed
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
此标志指示组件应异步加载(使用单独的 chunk),无论是否使用 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 case 组件名称。如果未提供,它将从组件名称生成。kebabName
(可选)
类型:kebabCase(options.name)
Kebab case 组件名称。如果未提供,它将从组件名称生成。export
(可选)
类型:string
默认:'default'
指定命名导出或默认导出。如果未提供,则将其设置为'default'
。shortPath
(可选)
类型:string
组件的短路径。如果未提供,它将从组件路径生成。chunkName
(可选)
类型:string
默认:'components/' + kebabCase(options.name)
组件的 chunk 名称。如果未提供,它将从组件名称生成。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
组件的优先级,如果多个组件具有相同的名称,则将使用优先级最高的组件。