组件

组件是 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) 在生产环境中用于配置带有 Lazy 前缀的组件如何通过其魔术注释由 webpack 处理。在 webpack 文档 中了解更多信息
• preload（可选）
  类型：boolean
  这些属性 (prefetch/preload) 在生产环境中用于配置带有 Lazy 前缀的组件如何通过其魔术注释由 webpack 处理。在 webpack 文档 中了解更多信息
• isAsync（可选）
  类型：boolean
  此标志指示组件应异步加载（使用单独的块），无论是否使用 Lazy 前缀。
• extendComponent（可选）
  类型：(component: Component) => Promise<Component | void> | (Component | void)
  一个将为目录中找到的每个组件调用的函数。它接受一个组件对象，并应返回一个组件对象或解析为组件对象的 promise。
• global（可选）
  类型：boolean
  默认值：false
  如果启用，则注册组件以使其全局可用。
• island（可选）
  类型：boolean
  如果启用，则将组件注册为岛屿。
• 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)
  帕斯卡大小写组件名称。如果未提供，它将从组件名称生成。
• kebabName（可选）
  类型：kebabCase(options.name)
  短横线大小写组件名称。如果未提供，它将从组件名称生成。
• export（可选）
  类型：string
  默认值：'default'
  指定命名或默认导出。如果未提供，它将设置为 'default'。
• shortPath（可选）
  类型：string
  组件的简短路径。如果未提供，它将从组件路径生成。
• chunkName（可选）
  类型：string
  默认值：'components/' + kebabCase(options.name)
  组件的块名称。如果未提供，它将从组件名称生成。
• prefetch（可选）
  类型：boolean
  这些属性 (prefetch/preload) 在生产环境中用于配置带有 Lazy 前缀的组件如何通过其魔术注释由 webpack 处理。在 webpack 文档 中了解更多信息
• preload（可选）
  类型：boolean
  这些属性 (prefetch/preload) 在生产环境中用于配置带有 Lazy 前缀的组件如何通过其魔术注释由 webpack 处理。在 webpack 文档 中了解更多信息
• global（可选）
  类型：boolean
  默认值：false
  如果启用，则注册组件以使其全局可用。
• island（可选）
  类型：boolean
  如果启用，则将组件注册为岛屿。您可以在 <NuxtIsland/> 组件描述中阅读有关岛屿的更多信息。
• mode（可选）
  类型：'client' | 'server' | 'all'
  默认值：'all'
  此选项指示组件是否应在客户端、服务器或两者上呈现。默认情况下，它将在客户端和服务器上呈现。
• priority（可选）
  类型：number
  默认值：1
  组件的优先级，如果多个组件具有相同的名称，则将使用优先级最高的组件。