[Vue.js]"Component name ~ should always be mutli-word" 에러 해결 방법

현상

 

vue router를 설치하여 router별 .vue 페이지를 만드는데 index.vue라는 이름으로 파일을 만들고 코드를 작성하니 <template> 태그 부분에서 아래와 같은 에러 메세지가 발생했다.

 

"Component name “index” should always be mutli-word"

 

[에러 화면]

 

원인

• eslint의 기본 규칙이 컴포넌트 이름을 정할 땐 두 개 이상의 단어를 사용하는 규칙이어서 컴파일 에러가 났다.

 

해결

• 방법 1) .vue 파일 이름을 한 단어가 아닌 두 개 이상의 단어로 지정한다. (예 : myIndex.vue)
• 방법 2) eslint 규칙 중 vue/multi-word-component-names 규칙을 off로 변경하기 위해 .eslintrc.js 파일의 rule 부분에 아래 규칙을 추가해 준다.

[.eslintrc.js 파일에 추가]

  rules: {
    "vue/multi-word-component-names": "off"
  }

 

.vue 파일 이름을 매번 두 개 이상 단어로 설정할 수는 없어서 방법 2) 로 적용하여 해결했다!