基础Vue项目注册header组件后提示未使用无法识别该如何解决？

问题原因 #

你注册的组件名header和原生HTML的<header>标签重名，Vue模板解析时会优先将小写的<header>识别为原生HTML元素，不会匹配到你注册的自定义组件，因此ESLint判定你注册的组件未被使用，抛出vue/no-unused-components错误。

解决方案 #

方案1（推荐）：按规范修改组件名 #

Vue官方要求自定义组件名避免和原生HTML/SVG元素重名，且推荐使用多单词命名，你可以按以下步骤修改：

1. 将组件文件header.vue重命名为AppHeader.vue
2. 修改App.vue代码如下：

<template>
  <div class="container">
    <AppHeader />
  </div>
</template>

<script>
import AppHeader from './components/AppHeader'

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

方案2：使用大驼峰写法调用组件 #

如果暂时不想修改组件文件名，可以直接在注册和调用组件时使用大驼峰写法，让Vue识别为自定义组件：
修改App.vue代码如下：

<template>
  <div class="container">
    <Header />
  </div>
</template>

<script>
import Header from './components/header'

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

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