12:9 error Component name "Person" should always be multi-word vue/multi-word-component-names

### Vue 组件命名规则

为了遵循最佳实践并避免 ESLint 报告 `vue/multi-word-component-names` 错误，Vue 组件应始终采用多词形式。单个单词的组件名称可能会导致潜在冲突和混淆。

#### 多词命名方式
推荐使用两种主要的方式来进行多词命名：

- **PascalCase (大驼峰)**：所有单词首字母都大写且连在一起，例如 `MyComponentName`。
- **kebab-case (短横线分隔)**：全部小写字母并通过短横线连接各部分，比如 `my-component-name`[^1]。

#### 修改现有组件名
对于已经存在的名为 "Login" 的组件，建议将其重命名为更具体的双词组合，如 `UserLogin` 或者 `LoginForm`。这不仅解决了 ESLint 警告问题，还提高了代码可读性和维护性。

// 不推荐的做法 - 单词命名
<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: 'Login', // 违反了 multi-word rule
};
</script>

// 推荐做法之一 - PascalCase
<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: 'UserLogin',
};
</script>

<!-- 另一种推荐方法 - kebab-case -->
<div id="app">
  <user-login></user-login> <!-- 使用自定义标签时保持一致 -->
</div>

如果希望禁用此规则而不是更改组件名称，则可以在项目的 `.eslintrc.js` 文件中配置 ESLint 来忽略该特定警告[^3]:

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

但是请注意，这样做可能会影响代码质量标准的一致性。