Nuxt3 中文课程《实战全栈开发简书》限时优惠

Components

Nuxt Kit 提供了一组工具,帮助你处理组件。你可以全局或局部注册组件,并且还可以添加要扫描的目录。

组件是你的 Nuxt 应用的构建块。它们是可重用的 Vue 实例,用于创建用户界面。在 Nuxt 中,默认情况下会自动导入 components 目录中的组件。然而,如果你需要从其他目录导入组件,或者希望按需选择性地导入它们,@nuxt/kit 提供了 addComponentsDiraddComponent 方法。这些工具允许你自定义组件配置,以更好地适应你的需求。

addComponentsDir

注册一个要扫描的目录,并在使用时自动导入。请注意,这不会全局注册组件,除非你指定了 global: true 选项。

类型

async function addComponentsDir (dir: ComponentsDir): 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
}

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
}

参数

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
    如果启用,将注册组件为 islands。
  • watch (可选)
    类型: boolean
    监视指定的路径以进行更改,包括文件添加和文件删除。
  • extensions (可选)
    类型: string[]
    Nuxt 构建器支持的扩展名。
  • transpile (可选)
    类型: 'auto' | boolean
    使用 build.transpile 对指定的路径进行转译。如果设置为 'auto',则在路径中包含 node_modules/ 时会将 transpile: true

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)
    PascalCase 的组件名称。如果未提供,则会从组件名称生成。
  • kebabName (可选)
    类型: kebabCase(options.name)
    KebabCase 的组件名称。如果未提供,则会从组件名称生成。
  • 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
    如果启用,将注册组件为 islands。你可以在 <NuxtIsland/> 组件描述中阅读更多关于 islands 的信息。
  • mode (可选)
    类型: 'client' | 'server' | 'all'
    默认: 'all'
    此选项指示组件应在客户端、服务器端或两者上渲染。默认情况下,它将在客户端和服务器端上渲染。
  • priority (可选)
    类型: number
    默认: 1
    组件的优先级,如果多个组件具有相同的名称,则使用优先级最高的组件。