집 > 기사 > 웹 프론트엔드 > Vue 간소화된 스타일 코드 공유

Vue 간소화된 스타일 코드 공유

小云云원래의: 2018-01-31 11:24:351561검색

Vue 공식 홈페이지의 스타일 가이드는 우선순위(필수, 적극 권장, 권장, 주의 사용)에 따라 분류되어 있으며, 코드 간격이 커서 쿼리하기 어렵습니다. 이 글은 Vue 스타일 가이드의 간소화된 버전이며, 구성 요소 이름, 지침 및 기능을 포함하여 관련 정보를 주로 소개합니다. 그것을 참조할 수 있습니다. 모두에게 도움이 되기를 바랍니다.

컴포넌트 이름

[컴포넌트 이름은 여러 단어로 구성되어야 합니다](필수)

컴포넌트 이름은 루트 컴포넌트 App을 제외하고 항상 여러 단어로 이루어져야 합니다. 이렇게 하면 모든 HTML 요소 이름이 단일 단어이기 때문에 기존 및 향후 HTML 요소와의 충돌을 피할 수 있습니다

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

[단일 파일 구성 요소 파일 이름은 항상 대문자(PascalCase)로 시작하거나 항상 줄 연결(kebab-)이어야 합니다. case)] (강력히 권장)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

[기본 구성 요소 이름은 특정 접두사로 시작해야 합니다] (강력히 권장)

특정 스타일과 규칙을 적용하는 기본 구성 요소(즉, 논리 또는 상태 비저장 구성 요소가 없는 디스플레이 클래스)는 모두 Base, App 또는 V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

와 같은 특정 접두사로 시작하세요.[단일 활성 인스턴스만 있어야 하는 구성 요소는 고유성을 표시하기 위해 접두사로 이름을 지정해야 합니다](강력 권장)

이것은 구성 요소가 단일 페이지에서만 사용할 수 있지만 각 페이지에서는 한 번만 사용할 수 있습니다. 이러한 구성 요소는 어떠한 props도 허용하지 않습니다.

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

[상위 구성 요소와 밀접하게 결합된 하위 구성 요소는 상위 구성 요소 이름을 접두사] (강력히 권장)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

[컴포넌트 이름은 상위 수준(일반적으로 일반적인 설명) 단어로 시작하고 설명적인 수정자로 끝나야 합니다.] (강력히 권장)

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

[단일 파일 컴포넌트 및 문자열 템플릿에서 컴포넌트 이름은 항상 PascalCase여야 합니다. 하지만 DOM 템플릿에서는 항상 케밥 케이스입니다.】(강력 권장)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

【컴포넌트 이름은 약어가 아닌 전체 단어로 구성되어야 합니다】(강력 권장)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

컴포넌트 관련

【 단일 파일 JSX에서 구성 요소, 문자열 템플릿 및 콘텐츠가 없는 구성 요소는 자동으로 닫혀야 합니다. 하지만 DOM 템플릿에서는 이 작업을 수행하지 마세요.] (강력히 권장됨)

자체 닫는 구성 요소는 콘텐츠가 없을 뿐만 아니라 의도적으로 콘텐츠도 없음을 의미합니다.

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

[구성 요소 스타일 범위 설정](필수)

이 규칙은 단일 파일 구성 요소에만 관련됩니다. 범위가 지정된 속성을 사용할 필요는 없습니다. 범위 설정은 CSS 모듈을 사용하거나 다른 라이브러리 또는 규칙을 사용하여 수행할 수도 있습니다.

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>

【하나의 파일에 하나의 컴포넌트만】(강력히 권장)

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

【컴포넌트 옵션의 기본 순서】(권장)

1. 부작용(컴포넌트 외부에서 발생하는 효과)

2. 인식(컴포넌트 이외의 지식 필요)

name

parent

3. 컴포넌트 유형(컴포넌트 유형 변경)

function

4. 템플릿 수정자(템플릿 컴파일 방식 변경)

delimiters

comments

5. 템플릿 종속성(템플릿에 사용되는 리소스)

comComponents

directives

filters

6. 조합(속성을 옵션으로 병합)

extends

mixins

7. 인터페이스(컴포넌트 인터페이스)

inheritAttrs

model

props /propsData

8, 로컬 상태(로컬 반응 속성)

data

computed

9, 이벤트(반응 이벤트에 의해 트리거되는 콜백)

watch

수명 주기 후크(순서에 따라 호출됨)

10. 비반응형 속성(반응형 시스템에 의존하지 않는 인스턴스 속성)

methods

11. 렌더링(구성 요소 출력에 대한 선언적 설명)

template/render

renderError

prop

[Prop 정의는 최대한 상세해야 합니다.] (필수)

상세한 prop 정의에는 두 가지 이점이 있습니다. 1. 컴포넌트의 API를 설명하므로 컴포넌트의 사용법을 쉽게 이해할 수 있습니다. 2. 개발 환경에서; , 구성 요소에 잘못된 형식의 prop을 제공하면 Vue가 오류의 잠재적 원인을 파악하는 데 도움이 되도록 경고합니다

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

【prop를 선언할 때 이름 지정은 항상 camelCase를 사용해야 하며 템플릿과 JSX에서는 항상 kebab-case를 사용해야 합니다. (강력히 권장)

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
 type: String,
 required: true
 }
}

명령 및 기능

【항상 v-for와 함께 키 사용】(필수)

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String}
<WelcomeMessage greeting-text="hi"/>

【같은 요소에 v-if와 v-for를 동시에 사용하지 마세요】(필수 )

//bad
 <li v-for="todo in todos">
//good
 <li v-for="todo in todos":key="todo.id">

[여러 기능을 가진 요소는 여러 줄로 작성해야 하며 각 기능마다 한 줄씩 작성해야 함] (강력히 권장)

//bad
<li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li>
//good
<li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li>

[요소 기능의 기본 순서] (권장)

1 정의(구성 요소에 대한 옵션 제공)

2. 목록 렌더링(동일한 요소의 여러 변형 생성)

v-for

3. 조건부 렌더링(요소가 렌더링/표시되는지 여부)

v-if

v-else- if

v-else
v-show
v-cloak

4. 렌더링 방법(요소의 렌더링 방법 변경)

v-pre

v-once

5. 글로벌 인식(구성 요소 이상의 지식 필요)

6. 고유 기능(고유한 값이 필요한 기능)

ref

key

slot

7. 양방향 바인딩(바인딩과 이벤트 결합)

v-model

8. 기능(모든 일반 바운드 또는 언바운드 기능)

9、事件 (组件事件监听器)

v-on

10、内容 (复写元素的内容)

v-html
v-text

属性

【私有属性名】（必要）

在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_ )

//bad
 methods: {update: function () { }}
//bad
 methods: {_update: function () { } }
//bad
 methods: {$update: function () { }}
//bad
 methods: {$_update: function () { }}
//good
 methods: { $_myGreatMixin_update: function () { }}

【组件的data必须是一个函数】（必要）

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

//bad
Vue.component('some-comp', {
 data: {
 foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
 return {
 foo: 'bar'
 }
 }
})

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//bad
{{
 fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
 return this.fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
 }
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

//bad
computed: {
 price: function () {
 var basePrice = this.manufactureCost / (1 - this.profitMargin)
 return (
 basePrice -
 basePrice * (this.discountPercent || 0)
 )
 }
}
//good
computed: {
 basePrice: function () {
 return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
 return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
 return this.basePrice - this.discount
 }
}

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
 type: String,
 required: true
 },
 focused: {
 type: Boolean,
 default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

//bad
<style scoped>
button {
 background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
 background-color: red;
}
</style>

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线

4、如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个

元素)

//bad
<p v-if="error">
 错误：{{ error }}
</p>
<p v-else>
 {{ results }}
</p>
//good
<p
 v-if="error"
 key="search-status"
>
 错误：{{ error }}
</p>
<p 
 v-else 
 key="search-results"
>
 {{ results }}
</p>

Vue 간소화된 스타일 코드 공유

관련 기사