Vant 風(fēng)格指南

介紹

在參與 Vant 開(kāi)發(fā)時(shí)，請(qǐng)遵守約定的單文件組件風(fēng)格指南，指南內(nèi)容節(jié)選自 Vue 官方風(fēng)格指南。

組件數(shù)據(jù)

組件的 data 必須是一個(gè)函數(shù)。

// bad
export default {
  data: {
    foo: 'bar'
  }
}

// good
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

單文件組件文件名稱(chēng)

單文件組件的文件名應(yīng)該要么始終是單詞大寫(xiě)開(kāi)頭 (PascalCase)，要么始終是橫線(xiàn)連接 (kebab-case)。

// bad
mycomponent.vue
myComponent.vue

// good
my-component.vue
MyComponent.vue

緊密耦合的組件名

和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名。

// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue

自閉合組件

在單文件組件中沒(méi)有內(nèi)容的組件應(yīng)該是自閉合的。

<!-- bad -->
<my-component></my-component>

<!-- good -->
<my-component />

Prop 名大小寫(xiě)

在聲明 prop 的時(shí)候，其命名應(yīng)該始終使用 camelCase，而在模板中應(yīng)該始終使用 kebab-case。

// bad
export default {
  props: {
    'greeting-text': String
  }
};

// good
export default {
  props: {
    greetingText: String
  }
}

<!-- bad -->
<welcome-message greetingText="hi" />

<!-- good -->
<welcome-message greeting-text="hi" />

Props 換行

多個(gè) Props 的元素應(yīng)該分多行撰寫(xiě)，每個(gè) Props 一行，閉合標(biāo)簽單起一行。

<!-- bad -->
<my-component foo="a" bar="b" baz="c" />

<!-- good -->
<my-component
  foo="a"
  bar="b"
  baz="c"
/>

指令縮寫(xiě)

指令縮寫(xiě)，用 : 表示 v-bind: ，用 @ 表示 v-on:

<!-- bad -->
<input
  v-bind:value="value"
  v-on:input="onInput"
>

<!-- good -->
<input
  :value="value"
  @input="onInput"
>

Props 順序

標(biāo)簽的 Props 應(yīng)該有統(tǒng)一的順序，依次為指令、屬性和事件。

<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>

組件選項(xiàng)的順序

組件選項(xiàng)應(yīng)該有統(tǒng)一的順序。

export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};

組件選項(xiàng)中的空行

組件選項(xiàng)較多時(shí)，建議在屬性之間添加空行。

export default {
  computed: {
    formattedValue() {
      // ...
    },

    styles() {
      // ...
    }
  },

  methods: {
    onInput() {
      // ...
    },

    onChange() {
      // ...
    }
  }
};

單文件組件頂級(jí)標(biāo)簽的順序

單文件組件應(yīng)該總是讓頂級(jí)標(biāo)簽的順序保持一致，且標(biāo)簽之間留有空行。

<template>
...
</template>

<script>
/* ... */
</script>

<style>
/* ... */
</style>