Vue组件未显示vue js

Question

这是我的header.vue：

<template>
    <div>
        <h2>this is header h2</h2>
    </div>
</template>
<script>
export default {
  name: 'Header',
  data () {
    return {
      data: 'this is header'
    }
  }
}
</script>

这是我的HelloWorld.vue：

<template>
  <div class="hello">
    <header/>

  </div>
</template>

<script>

import Header from './Header'  
export default {
  name: 'HelloWorld',
  //после того как импортировали компоент - вот здесь указываем его явно:
  components: {
      Header
    },
  data () {

    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

这是我的文件夹结构：

但是标题组件没有显示 - 没有错误，只是没有显示。我该怎么办？

Answer 1

如果您按照以下方式定义组件：

components: {
  Header
},

在您的模板中调用它，如下所示：<Header /> with capitalize。

如果您想使用类似于<header></header>的kebab-case，请按以下方式定义您的组件：

components: {
  'header': Header
},

修改
根据@MaxLyashuk评论，在这种情况下，Vue组件（source）的命名约定不区分大小写。

<Header />大写的工作原因是因为<header>是html标记的保留字。