Vue 스타일 가이드 1
Vue에서 제시하고 있는 공식 스타일 가이드입니다.
만약 현재 Vue를 사용하여 프로젝트를 진행중이라면 이 문서는 에러와 바이크쉐딩(bikeshedding), 안티패턴을 피하는 좋은 참조가 될것 입니다.
그러나 무조건 이 문서에서 제시하는 스타일 가이드가 당신의 프로젝트에 적합한 것은 아닙니다.
그러므로 당신의 경험과 기술스택, 개인적 통찰력을 바탕으로 이 스타일 가이드가 적용되는 것을 권장해드립니다.
참고 : https://kr.vuejs.org/v2/style-guide/
★ : 필수
☆ : 매우 추천
○ : 추천
X : 주의 요함
1.컴포넌트 이름에 합성어 사용 ★
App과 transition, component와 같은 Vue에서 제공하는 컴포넌트를 제외하고 컴포넌트 이름은 항상 합성어를 사용합니다.
나쁨
Vue.component('todo', {
// ...
});
<script>
export default {
name : 'Todo',
// ...
}
</script>
좋음
Vue.component('todo-item',{
// ...
})
<script>
export default {
name : 'TodoItem',
// ...
}
</script>
2.컴포넌트 데이터 ★
컴포넌트의 data는 반드시 함수여야 합니다.
data의 값이 오브젝트일 경우, 컴포넌트의 모든 인스턴스가 공유하게 됩니다.
의도치 않는 데이터의 변경이 나타날 수 있습니다.
나쁨
Vue.component('some-comp', {
data : {
foo : 'bar'
}
})
export default {
data : {
foo : 'bar'
}
}
좋음
Vue.component('some-comp', {
data : function () {
return {
foo : 'bar'
}
}
})
export default {
data () {
return {
foo : 'bar'
}
}
}
new Vue({
data : {
foo : 'bar'
}
})
3.Props의 상세한 정의 ★
Prop은 가능한 상세하게 정의되어야 합니다.
컴포넌트의 API를 문서화하므로 사용방법을 쉽게 알 수 있고, 경고 메시지 출력등으로 오류의 원인을 파악할 수 있게 도와 줍니다.
나쁨
props : ['status']
좋음
props : {
status : String
}
props : {
status : {
type : String,
required : true,
validator : function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
4.v-if와 v-for의 동시 사용 금지 ★
v-for가 사용된 엘리먼트에 v-if를 사용해선 안됩니다.
v-for의 우선 순위가 더 높으므로 렌더링 할 때마다 전체 목록을 반복해야 합니다.
나쁨
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
좋음
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
5.컴포넌트 스타일 스코프 ★
최상위 app 구성 요소 및 레이아웃 구성 요소의 스타일은 전역 스타일일 수 있지만 다른 모든 구성요소는 항상 범위가 지정되어야 합니다.
다른 라이브러리나 프로젝트의 css와 충돌을 방지할 수 있습니다.
예를 들어 button, btn, icon 같은 클래스는 많은 라이브러리에서 사용하고 있습니다.
나쁨
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color:red;
}
</style>
좋음
<template>
<button class="button button-close">X</button>
</template>
<style scoped>
.button {
border:none;
border-radius:2px;
}
.buttonc-close {
background-color:red;
}
</style>
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<style module>
.button {
border:none;
border-radius:2px;
}
.button-close {
background-color:red;
}
</style>
6.Private 속성 이름 ★
플러그인이나 mixin 등에서 커스텀 사용자 private 프로퍼티에는 항상 접두사 $_를 사용하는게 좋습니다.
나쁨
var myGreatMixin = {
// ...
methods : {
update : function () {
// ...
}
}
}
var myGreatMixin = {
// ...
methods : {
$update : function () {
// ...
}
}
}
좋음
var myGreatMixin = {
// ...
methods : {
$_myGreatMixin_update : function () {
// ...
}
}
}
var myGreatMixin = {
// ...
methods : {
publicMethod() {
myPrivateFunction()
}
}
}
function myPrivateFunction() {
// ...
}
export default myGreatMixin
7.컴포넌트 파일 ☆
빌드 시스템을 사용하여 파일을 연결할 때 각 구성 요소는 자체 파일이 있어야 합니다.
나쁨
Vue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})
좋음
components/
TodoList.js
TodoItem.js
components/
TodoList.vue
TodoItem.vue
8.싱글 파일 컴포넌트 이름 규칙 지정 ☆
싱글 파일 컴포넌트의 이름 지정시 PascalCase나 kebab-case를 추천합니다.
나쁨
components/
mycomponent.vue
components/
myComponent.vue
좋음
components/
MyComponent.vue
components/
my-component.vue
9.베이스 컴포넌트 이름 ☆
html 문서내의 고유의 스타일과 규칙을 적용자로 사용할 경우 특정 접두사로 시작해야 합니다.
나쁨
components/
MyButton.vue
VueTable.vue
Icon.vue
좋음
components/
BaseButton.vue
BaseTable.vue
BaseIcon.vue
components/
AppButton.vue
AppTable.vue
AppIcon.vue
components/
VButton.vue
VTable.vue
VIcon.vue
10.싱글 인스턴스 컴포넌트 이름 ☆
재사용 구성요소가 아닌 페이지당 한 번만 사용되는 구성 요소는 The 접두사를 사용합니다.
나쁨
components/
Heading.vue
MySidebar.vue
좋음
components/
TheHeading.vue
TheSidebar.vue