组件

组件是您 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
}

// 如果您需要，可以扩展这个接口（导出自 `@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)
  一个函数，它将针对目录中的每个组件被调用。它接受组件对象并应该返回一个组件对象或一个解析为组件对象的承诺。
• 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)
  名称的 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
  如果启用，注册组件为岛屿。您可以在 <NuxtIsland/> 组件描述中阅读更多关于岛屿的信息。
• mode (可选)
  类型: 'client' | 'server' | 'all'
  默认: 'all'
  这个选项指示组件应该在客户端、服务器端还是二者渲染。默认情况下，它将在客户端和服务器端渲染。
• priority (可选)
  类型: number
  默认: 1
  组件的优先级，如果多个组件具有相同名称，则优先级最高的将被使用。