[已解決] ESLint: Component name "**" should always be multi-word.(vue/multi-word-component-names)

在 Vue 的中 依據 Vue 官方的元件(Component) 風格指南(Style Guide)，為了避免自訂元件和 Vue 內建元件發生衝突，要求使用者自訂的元件名稱必須要是多個單詞組成，不然就會拋出下面的警告:

    
ESLint: Component name "**" should always be multi-word.(vue/multi-word-component-names)
    

所以解決方式就是改為多個單詞組成，例如 todo 改為 todoItem

    
<script>
export default {
  name: 'TodoItem',
  // ...
}
</script>
    

命名規則可以使用大駝峰式命名(PascalCase)或是連字號(kebab-case)，不過因為瀏覽器在解析 html 的時候不分大小寫，所以最好是使用連字號分隔。

範例

元件名稱為 UserLogout ，在 App.vue 使用時將 UserLogout 轉換為連字號(kebab-case) 的 user-logout 使用 元件:

    
export default {
  name: "UserLogout",
  setup() {
    return {
      onclick,
    }
  }
}
    

使用:

    
<script>
import {defineComponent} from "vue";
import UserLogout from "@/components/UserLogout.vue";

export default defineComponent({
  components: {'user-logout': UserLogout}
})
</script>


<template>
    <user-logout></user-logout>
</template>
    

參考資料：
vue/multi-word-component-names