Vue组件异常求助：添加Template标签时遇多词组件名报错

错误原因 #

这是Vue官方ESLint规则vue/multi-word-component-names的校验结果，目的是避免组件名和HTML原生标签（比如<nav>）冲突，同时符合Vue组件命名的最佳实践。

解决办法 #

方法1：修改组件名称（推荐） #

把单词的Navigation改成多词命名，比如AppNavigation、MainNavigation或者SiteNavigation，确保名称清晰且符合规则。

修改后的组件示例：

<script>
export default {
  name: 'AppNavigation' // 这里改成多词名称
}
</script>
<template>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 可补充剩余的折叠菜单内容 -->
    </div>
  </nav>
</template>

方法2：关闭ESLint的该规则（不推荐，除非特殊场景） #

如果一定要保留单词名称，可以在项目的ESLint配置文件（比如.eslintrc.js）中修改规则：

module.exports = {
  rules: {
    'vue/multi-word-component-names': 'off'
  }
}

或者在单个组件文件顶部添加注释，仅忽略当前组件的该规则：

<!-- eslint-disable vue/multi-word-component-names -->
<script>
export default {
  name: 'Navigation'
}
</script>
<template>
  <!-- 组件内容 -->
</template>

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