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 /> 컴포넌트 props # 일반적인 CSS 클래스 전달용 prop보다는 의도를 설명하는 시맨틱 prop을 선호하세요. // bad - 스타일링 소유권을 모든 호출자에게 넘깁니다 <user-name :username-css-classes="'gl-truncate'" /> // good - 컴포넌트가 자체 스타일링을 소유하고, 호출자는 의도를 표현합니다 <user-name :truncate-username="true" /> 불리언 truncate-username 과 같은 시맨틱 prop은 스타일링 소유권을 컴포넌트 내부에 유지하므로, 호출자가 컴포넌트 내부를 다시 스타일링할 수 없고 컴포넌트는