Vue组件如何自动按需引入，实现长尾词效果的最佳实践是啥？

本文共计1318个文字，预计阅读时间需要6分钟。

目录- 全局注册- 局部注册- 局部自动注册- 不同案例对比- 关于组件名- 参考- 总结- 在Vue中，我们可以通过全局组件和局部组件注册的方式来使用组件： - 全局注册：通过全局组件注册，可以在任何组件中使用该组件，无需在引入时指定路径。 - 局部注册：在需要使用组件的子组件中注册，仅在当前组件及其子组件中使用。

目录

• 全局注册
• 局部注册
• 局部自动注册
• 不同方案对比
• 关于组件名
• 参考
• 总结

在Vue中我们可以通过全局组件、局部注册的方式来使用组件

全局注册

通过app.component来创建全局组件

import { createApp } from 'vue' import HelloWorld from './components/HelloWorld' const app = createApp({}) // 全局注册一个名为hello-wolrd的组件 app.component('hello-wolrd', HelloWorld);

一旦我们全局注册了组件，我们就可以在任何地方使用这个组件：<hello-wolrd/>

值得注意的是全局注册会使Vue失去TypeScript的支持, Vue 3 有一个 PR 扩展了全局组件的接口。