Vue CLI3中如何全局注册组件并正常使用？

你当前的问题是仅在入口文件导入了组件文件，未执行全局注册逻辑，导致模板无法识别组件标签。

现有项目结构 #

+src
  +components
    +Logo.vue
App.vue
main.js

修改入口文件main.js #

全局注册需要在创建Vue应用实例后、挂载实例前，调用app.component()方法完成注册，修改后的main.js代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Logo from '@/components/Logo.vue'

// 先创建应用实例
const app = createApp(App)
// 全局注册组件：第一个参数为自定义组件名，第二个参数为导入的组件对象
app.component('Logo', Logo)
// 挂载路由、挂载应用
app.use(router).mount('#app')

验证效果 #

修改完成后重启本地开发服务，你现有的App.vue代码无需任何调整，就可以正常渲染<Logo />组件：

<template>
  <div>
    <Logo />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

补充说明：全局注册的组件可在项目内所有组件的模板中直接使用，不需要在单个组件内重复导入、局部注册。如果后续需要批量注册多个全局组件，重复调用app.component()方法即可。

内容的提问来源于stack exchange，提问作者Joseph1997520