为默认vue-cli webpack项目添加组件时遇到的问题

我之前也踩过组件不渲染的坑，咱们一步步来排查和解决：

• 先确认组件注册环节没出错
  在App.vue里导入组件后，一定要在components选项里注册，不然Vue根本认不出这个自定义组件。正确的示例代码应该是这样：

  <script>
  import AppHeader from './components/AppHeader.vue'
  
  export default {
    name: 'App',
    components: {
      AppHeader // 这一步绝对不能少！
    }
  }
  </script>
  

  另外注意组件名的大小写对应：如果模板里用<app-header>，注册时用驼峰或短横线命名都可以；但如果用<AppHeader>，注册的组件名也要保持一致。

• 检查AppHeader.vue的模板结构
  如果是Vue 2项目（vue-cli老版本默认创建的），模板必须有一个唯一根元素，没有的话组件直接不会渲染。比如你的AppHeader.vue得这么写：

  <template>
    <div class="app-header"> <!-- 必须有这个根容器 -->
      <!-- 这里放你的头部内容，比如替换后的图标、标题 -->
      <h1>我的自定义头部</h1>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AppHeader'
  }
  </script>
  
  <style scoped>
  /* 样式可以后续补充，先保证结构正确 */
  </style>
  

  要是你用的是Vue 3项目，虽然支持多根元素，但新手阶段还是先加个根容器更稳妥，避免不必要的问题。

• 确认App.vue里组件的使用方式
  别在模板里漏写组件，也别写错标签名。比如正确的使用方式：

  <template>
    <div id="app">
      <AppHeader /> <!-- 或者 <app-header> 都能生效 -->
      <!-- 原来的Vue图标和HelloWorld组件 -->
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Vue.js!" />
    </div>
  </template>
  

• 查看浏览器控制台的报错信息
  打开浏览器F12的Console面板，看看有没有红色的错误提示。比如“组件未注册”“模板语法错误”这类信息，能直接帮你定位问题，比瞎试高效多了。

• 核对Vue版本和vue-cli版本
  看看package.json里的vue版本号：如果是"vue": "^2.x.x"，必须遵守单根元素规则；如果是"vue": "^3.x.x"，可以不用单根，但也要保证模板语法没写错。

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