尝试创建一个全局页脚组件并导入到我的 Vue.js 文件中

Question

_{所以我最初在 ./components/Footer.vue 中创建了一个页脚组件。这是该特定组件的代码（页脚组件）-}

<template>

  <section>
    <div class="skew skew-top mr-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
      </svg>
    </div>
    <div class="skew skew-top ml-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
      </svg>
    </div>
    <div class="py-20 bg-gray-900 radius-for-skewed">
      <div class="container mx-auto px-4">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-1/3 mb-16 lg:mb-0">
            <a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
              <img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
            </a>
            <p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
            <div>
              <a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
              </a>
              <a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/twitter-purple.svg">
              </a>
              <a class="inline-block w-10 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
                <img class="mx-auto" src="atis-assets/social/instagram-purple.svg">
              </a>
            </div>
          </div>
          <div class="w-full lg:w-2/3 lg:pl-16 flex flex-wrap justify-between">
            <div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Products</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Services</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">News and Stories</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
              </ul>
            </div>
            <div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Important Links</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Organization Team</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Our Journeys</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Pricing Plans</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Terms &amp; Conditions</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Privacy Policy</a></li>
              </ul>
            </div>
            <div class="w-full md:w-1/3 lg:w-auto">
              <h3 class="mb-6 text-2xl font-bold text-purple-600">Company</h3>
              <ul>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Jobs</a></li>
                <li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Press</a></li>
                <li><a class="text-gray-400 hover:text-gray-300" href="#">Contact Us</a></li>
              </ul>
            </div>
          </div>
        </div>
        <p class="lg:text-center text-sm text-gray-400 border-t border-gray-800 pt-12 mt-16">&copy; 2021. All rights reserved.</p>
      </div>
    </div>
    <div class="skew skew-bottom mr-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
      </svg>
    </div>
    <div class="skew skew-bottom ml-for-radius">
      <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
        <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
      </svg>
    </div>
  </section>

</template>

<script>
  export default {}
</script>

**这是我的 App.vue 的内容 - **

<script>

import { createApp } from 'vue'
import Footer from './components/Footer.vue'

const globalComponents = createApp({})

globalComponents.component(
  // the registered name
  'Footer',
)
app
.component('Footer', Footer)

</script>


<template>
  <h1 class="text-[100px] text-center m-auto text-red underline"> Hello Vue JS </h1>
</template>

<Footer />

<style scoped>
</style>

但是，当我运行 npm run dev 时，一切都会打开，本地服务器只会显示一个空白页面，即使那样

你好 VueJS

不仅如此，页脚根本没有出现，并且在我的 IDE 中突出显示为灰色，这意味着它没有被正确导入。

我期待我可以导入这个 Footer.vue 组件并将其用作我的 App.vue 中的全局组件。如果您需要任何进一步的详细信息，请随时询问，非常感谢您的帮助，我是一个试图学习这个新框架的菜鸟啊！

Answer 1

将页脚放在<template>

密码是here

我认为你不需要createApp

只需将<Footer />这样放在<templete>标签内的App.vue中

<template>
  Hello World!
  <Footer />
</template>