Vue.js 코딩가이드 : Strongly Recommended (Improving Readability)

참고한 문서는 Vue.js Official Style Guide 이다.

모든 가이드가 그렇듯, 절대적인 지표는 아니며 개발 방향을 정해주는 정도로 참고하면 되겠습니다.

Priority B Rules : Strongly Recommended (Improving Readability)

Component files

• 빌드시스템이 파일의 병합이 가능하다면, 가급적 각 컴포넌트는 각자의 파일로 분리하도록 한다.

Good

components/
|- TodoList.vue
|- TodoItem.vue

Single-file component filename casing

• 싱글파일 컴포넌트 체계를 사용한다면 single-file component는 PascalCase나 kebab-case를 사용하도록 한다.
• PascalCase는 코드 작성시 에디터툴들과의 호환성이 좋다. 다만 case-insensitive system에서는 가끔 오류를 발생시킬 수 있다. kebab-case는 모든 경우에 잘 호환된다.

Good

components/
|- MyComponent.vue

components/
|- my-component.vue

Base component name

• Base component는 Base, App, V 와 같은 special prefix로 시작해야한다.

• Base component는 앱에서 사용되는 consistent styling과 behavior의 기본이 된다.

  Base component는 다음의 항목만 포함하는 컴포넌트를 의미한다.

  • HTML elements
  • other base compoenents
  • 3rd-party UI components