如何在 SPA Vue.js 中包含常用组件 Header 和 Footer

Question

我正在 vuejs 中创建一个项目 spa/我已经创建了常用组件页眉和页脚，我想将其包含在主 App.vue 中。

我在下面分享我的代码结构：

2. 我正在共享我的文件 App.vue：

<template>

 <header></header>

</template>

<script>

import Header from './components/Header.vue'
// import Footer from 'components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,
    // Footer
  }
}
</script>

3. 在 Vue.js 的页面中没有出现任何想法如何将页眉和页脚包含在一起以在 spa vuejs 中显示良好。 这种方式哪里不对呢？

Answer 1

header 和 footer 是原生 html 元素，您应该使用不常见的名称来命名组件，例如将它们命名为 AppHeader 和 AppFooter 并像这样使用它们：

<template>
  <AppHeader />
  <!-- other content-->
  <AppFooter /> 
</template>
<script>
  import {AppHeader} from './components/AppHeader.vue'
  import {AppFooter} from './components/AppFooter.vue'
  export default {
   name:'App',
   components:{ AppHeader, AppFooter}
 
  }
</script>