Vue.js全局注册Footer组件失败，页面空白求助

DevOps 小满

2026-8-4

首要问题：全局注册的位置错了

你提到在App.vue里用createApp注册全局组件，这是核心错误——createApp是创建Vue应用实例的入口代码，必须放在**main.js（或main.ts）**里，不能写在组件内部。组件里调用createApp会覆盖原有应用实例，直接导致页面空白。

正确操作步骤

1. 修正main.js（入口文件）的代码

这是全局注册组件的正确位置：

import { createApp } from 'vue'
import App from './App.vue'
// 导入你的Footer组件
import Footer from './components/Footer.vue'

const app = createApp(App)
// 全局注册组件，注意别用原生HTML标签名（比如Footer和原生<footer>冲突），换个名字
app.component('site-footer', Footer) 
// 或者用大驼峰命名：app.component('SiteFooter', Footer)

app.mount('#app')

2. 调整App.vue的代码

删掉App.vue里的createApp相关代码，直接用全局组件：

<template>
  <div class="app-container">
    <h1>这里是App.vue的内容</h1>
    <!-- 用你刚才注册的组件名，kebab-case和PascalCase都能生效 -->
    <site-footer />
    <!-- 或者<SiteFooter /> -->
  </div>
</template>

<script setup>
// 这里不需要再导入Footer，全局注册后直接用就行
</script>

额外排查点

命名冲突：别用Footer当组件名，和原生HTML的<footer>标签重名，Vue会把它当成原生标签解析，导致组件不渲染、IDE标签灰显，换个带前缀的名字比如SiteFooter就好。
路径检查：确认import Footer from './components/Footer.vue'的路径没错，Footer.vue确实在src/components目录下（标准Vue项目结构）。
看控制台错误：打开浏览器F12的Console面板，里面的错误信息能直接告诉你问题出在哪（比如路径写错、语法错误）。
根元素问题：确保App.vue的template里有唯一根容器（Vue3支持多根，但新手先包裹在一个
里更稳妥）。