【vue eslint】报错：Component name “xxxx“ should always be multi-word

问题描述：

vue eslint  报错：Component name “xxxx“ should always be multi-word

报错原因：

这个报错是因为组件命名不符合 ESLint 的官方代码规范。根据 Vue.js 风格指南，组件名称应该始终由多个单词组成（根组件 App 除外），这是为了避免与现有的以及未来的 HTML 元素发生冲突 。

具体来说，当你使用单个单词（如 "Find"）作为组件名称时，ESLint 会抛出 "Component name 'Find' should always be multi-word" 的错误。这是因为 HTML 标签都是单个单词的，如果组件也使用单个单词命名，可能会导致命名冲突 。

组件名称应该由多单词组成，如：使用大驼峰命名方式或者用“-”连接单词

解决办法：

方法一：

重命名组件为多个单词的组合，例如将 "Find" 改为 "FindComponent" 或 "SearchFind" 等 。

方法二：

给组件添加name属性，注意值必须为大驼峰且至少两个单词

方法三：

如果确实需要使用单个单词命名，可以通过修改 ESLint 配置文件（.eslintrc.js）来禁用这条规则，但这种方法不推荐，因为它违背了 Vue 的官方风格指南 。

注：建议采用第一种方法，遵循官方规范使用多个单词命名组件，这样可以提高代码的可维护性和可读性 。