组件

Nuxt 会自动导入 components/ 目录下任何组件 (以及你可能正在使用的任何模块注册的组件)。

组件命名

有一个组件在components/base/foo/Button.vue,组件的名称将基于自己的路径和文件名,并删除重复的段 (比如: an/an/Button.vue 注册名将会是 AnButton)。因此组件名会是:BaseFooButton

为清楚起见,建议组件的文件名与其名称匹配。 (所以,在上面的例子中, 你可以将 Button.vue 重命名为 BaseFooButton.vue)

动态导入组件

要动态导入一个组件 (也称为懒加载一个组件) 只需要在原组件名前加上 Lazy 前缀。例如上面的 BaseFooButton组件动态导入时,更改成 LazyBaseFooButton

当该组件不是总被需要,这一点特别重要。通过使用 Lazy 前缀,你可以在合适的时机,延迟加载组件代码,这有助于优化你的 JavaScript 包大小。

组件

Nuxt 提供了 <ClientOnly> 组件,是专门在客户端渲染组件的组件。只在客户端导入组件或在客户端插件中注册该组件。