组件
Nuxt 会自动导入 components/
目录下任何组件 (以及你可能正在使用的任何模块注册的组件)。
组件命名
有一个组件在components/base/foo/Button.vue,组件的名称将基于自己的路径和文件名,并删除重复的段 (比如: an/an/Button.vue 注册名将会是 AnButton)。因此组件名会是:BaseFooButton
为清楚起见,建议组件的文件名与其名称匹配。 (所以,在上面的例子中, 你可以将
Button.vue
重命名为BaseFooButton.vue
)
动态导入组件
要动态导入一个组件 (也称为懒加载一个组件) 只需要在原组件名前加上 Lazy
前缀。例如上面的 BaseFooButton组件动态导入时,更改成 LazyBaseFooButton
当该组件不是总被需要,这一点特别重要。通过使用
Lazy
前缀,你可以在合适的时机,延迟加载组件代码,这有助于优化你的 JavaScript 包大小。
组件
Nuxt 提供了 <ClientOnly>
组件,是专门在客户端渲染组件的组件。只在客户端导入组件或在客户端插件中注册该组件。