帮我写一个vue3的App.vue

在Vue 3中，`App.vue`通常是项目中最基本的组件，它通常包含了整个应用的入口和结构。下面是一个简单的`App.vue`文件示例：

<template>
  <div id="app">
    <router-view></router-view>
    <!-- 可能会包含一些全局的头部或者底部导航 -->
    <header-component></header-component>
    <main>
      <transition name="fade">
        <router-view v-if="$route.meta.isLoaded"></router-view>
        <loading-indicator v-else></loading-indicator>
      </transition>
    </main>
    <footer-component></footer-component>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import RouterView from '@/components/RouterView.vue'; // 引入路由视图组件
import HeaderComponent from '@/components/HeaderComponent.vue'; // 引入头部组件
import FooterComponent from '@/components/FooterComponent.vue'; // 引入底部组件
import LoadingIndicator from '@/components/LoadingIndicator.vue'; // 引入加载指示器

export default defineComponent({
  components: {
    RouterView,
    HeaderComponent,
    FooterComponent,
    LoadingIndicator
  },
});
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这个`App.vue`做了以下几件事：
1. 使用`router-view`动态渲染路由内容。
2. 包含全局的`header-component`和`footer-component`。
3. 当路由数据还未加载时显示加载指示器。