Templates 使用vue模板时未渲染组件

我有以下几点

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    export default {}
</script>

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header": Header
      }
    }
</script>

但当我运行此命令时，标题组件永远不会被渲染。我错过了什么？使用vue模板网页包插件是否需要一些特殊的东西

我研究了两个类似的堆栈溢出，并尝试使用

组件：{Header}

，但仍然不起作用

我也试过

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    export default {}
</script>

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header": Header
      }
    }
</script>

---

你的问题经常出现：

[Vue warn]：不要将内置或保留的HTML元素用作组件id:

name

在您的例子中，

是一个保留的HTML元素

---

，

与
数据：（）=>{
中的情况相同，这会给您带来问题{

。此规则适用于

方法

、

计算的

s、

观察者

和所有其他Vue实例选项。

导入头从哪里来。，您有一个，不是吗？很抱歉，它在main.js中。我在复制时意外删除了它，但无法修复它。我尝试通过添加一个类似于y的前缀来实现此目的你建议，但它仍然不起作用。什么前缀？我建议了前缀吗？我没有添加后缀（你建议的2），而是创建了前缀（我的标题）。这是因为根据HTML规范，它们应该是前缀

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data: () => {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

import Vue from 'vue';
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

<template>
    <div>
        <header2></header2>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header2": Header
      }
    }
</script>

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>