Vue.js 스타일 가이드

GitLab 프론트엔드 개발에서 Vue.js 컴포넌트 작성, 테스트, 스타일 적용에 관한 표준 규칙과 모범 사례를 설명합니다.

린팅 # 기본적으로 plugin:vue/recommended 설정과 함께 eslint-vue-plugin 을 사용합니다. 자세한 내용은 규칙 을 확인하세요. 기본 규칙 # Vue 템플릿에는 .vue 를 사용하세요. HAML에서 %template 을 사용하지 마세요. Vue 앱에 전달되는 데이터를 명시적으로 정의하세요. // bad return new Vue({ el: '#element', name: 'ComponentNameRoot', components: { componentName }, provide: { ...someDataset }, props: { ...anotherDataset }, render: createElement => createElement('component-name'), })); // good const { foobar, barfoo } = someDataset; const { foo, bar } = anotherDataset; return new Vue({ el: '#element', name: 'ComponentNameRoot', components: { componentName }, provide: { foobar, barfoo }, props: { foo, bar }, render: createElement => createElement('component-name'), })); 코드베이스를 명시적이고 검색 가능하게 유지하기 위해, 이 특정 경우에는 스프레드 연산자 사용을 권장하지 않습니다. 이는 Vuex 상태 초기화 와 같이 위의 방식이 유익한 모든 경우에 적용됩니다. 위의 패턴은 또한 인스턴스 생성 시 스칼라가 아닌 값을 쉽게 파싱할 수 있게 해줍니다. return new Vue({ el: '#element', name: 'ComponentNameRoot', components: { componentName }, props: { foo, bar: parseBoolean(bar) }, render: createElement => createElement('component-name'), })); 템플릿 내 컴포넌트 사용 # 템플릿에서 컴포넌트를 사용할 때는 다른 스타일보다 컴포넌트의 케밥 케이스(kebab-cased) 이름을 선호하세요. // bad // good <my-component /> 컴포넌트 name 속성 # 모든 Vue 컴포넌트에는 name 속성이 있어야 합니다. 파일명에서 파생된 PascalCase를 사용하세요. 예를 들어, board_app.vue 는 name: 'BoardApp' 이 됩니다. app.vue 또는 index.vue 와 같은 일반적인 파일명의 경우, 디렉터리 경로의 컨텍스트를 접두사로 붙여 고유한 이름을 만드세요. 예를 들어, admin/users/components/app.vue 는 name: 'AdminUsersApp' 이 됩니다. EE 컴포넌트가 CE 컴포넌트와 이름을 공유할 경우, EE 컴포넌트 이름에 EE 접미사를 추가하세요. 예를 들어, app/ 과 ee