Vue.js中HTML元素失效，Header组件<ul>标签编译报错求助

问题根源 #

你的Header.vue没有使用<template>标签包裹模板内容，违反了Vue单文件组件（SFC）的基本规范，导致Vue无法正确解析<ul>、<li>这类非根级HTML元素，从而触发编译报错。

修复代码 #

将Header.vue修改为以下结构，确保所有模板内容被<template>包裹：

<template>
  <div class="page-header">
    <ul>
      <li>Home</li>
      <li>About us</li>
    </ul>
  </div>
</template>

补充优化建议 #

• 所有Vue单文件组件的模板部分必须放在<template>标签内，这是Vue解析组件结构的必要前提
• App.vue中的<Header> </Header>可以简化为<Header />，写法更简洁规范

内容的提问来源于stack exchange，提问作者Kumara