Vant Style Guide

Introduced

When participating in Vant development, follow the agreed single-file component style guide, which is anthostylation from Vue's official style guide.

Component data

The data of the component must be a function.

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

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

Single file component file name

The file name of a single file component should either always be a word capital beginning (PascalCase) or always a cross-line connection (kebab-case).

// bad
mycomponent.vue
myComponent.vue

// good
my-component.vue
MyComponent.vue

The name of the tightly coupled component

Child components that are tightly coupled to the parent component should be named after the parent component name.

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

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

Self-closing components

Components that do not have content in a single file component should be self-closed.

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

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

Prop name case

When declaring prop, it should always be named camelCase, and kebab-case should always be used in the template.

// 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 line-up

Elements of multiple Props should be composed in multiple lines, one line for each Props, and one line for closing labels.

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

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

The abbreviation of the instruction

The abbreviation of the instruction, with : for v-bind: and for v-on with .

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

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

Props order

The props of the labels should have a uniform order, followed by instructions, properties, and events.

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

The order of component options

Component options should be in a uniform order.

export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};

Empty lines in component options

When there are more component options, it is recommended to add empty lines between properties.

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

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

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

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

The order of the top-level labels for single-file components

Single-file components should always keep the order of top-level labels consistent and leave empty lines between labels.

<template>
...
</template>

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

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