[Vue] Component name should always be multi-word 에러 조치 방법

---

[Error 내용]

 

[원인]

• vue에서 컴포넌트 명칭이 하나의 단어로 되어 있기 때문에 오류 발생
• 기본적으로 vue에서는 HTML 요소와 혼동을 일으킬 수 있는 요소를 제거하기 위해  컴포넌트 명칭을 2가지 이상의 단어 조합을 권장하고 있다 

 

[해결]

• 단일 단어가 아닌 다중 단어로 적용하면 해결

/* BAD */
Vue.component('test',{
})

//GOOD
Vue.component('BdTest',{
})

•  ESLint 를 설치한 상황에서 하나의 단어로 작성 하고 싶을 경우 lintOnSave의 속성을 false 로 변경 하여 단일 이름 에러 인식을 막을수 있다

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    lintOnSave:false
})