Vant 风格指南
在参与 Vant 开发时,请遵守约定的单组件风格指南,指南节选自 。
组件的 data 必须是。
// bad export default { data: { foo: 'bar' } } // good export default { data () { return { foo: 'bar' } } }
单组件的名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
// bad mycomponent.vue myComponent.vue // good my-component.vue MyComponent.vue
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
// bad components/ |- TodoList.vue |- TodoItem.vue └─ TodoButton.vue // good components/ |- TodoList.vue |- TodoListItem.vue └─ TodoListItemButton.vue
在单组件中没有的组件应该是自闭合的。
<!-- bad --> <my-component></my-component> <!-- good --> <my-component />
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 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 的元素应该分多行撰写,每个 Props 一行,闭合单起一行。
<!-- bad --> <my-component foo="a" bar="b" baz="c" /> <!-- good --> <my-component foo="a" bar="b" baz="c" />
指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:
<!-- bad --> <input v-bind:value="value" v-on:input="onInput" > <!-- good --> <input :value="value" @input="onInput" >
的 Props 应该有统一的顺序,依次为指令、和事件。
<my-component v-if="if" v-show="show" v-model="value" ref="ref" :key="key" :text="text" @input="onInput" @change="onChange" />
组件选项应该有统一的顺序。
export default { name: '', mixins: [], components: {}, props: {}, data() {}, computed: {}, watch: {}, created() {}, mounted() {}, destroyed() {}, methods: {} };
组件选项较多时,建议在之间空行。
export default { computed: { formattedValue() { // ... }, styles() { // ... } }, methods: { on { // ... }, onChange() { // ... } } };
单组件应该总是让顶级的顺序保持一致,且之间留有空行。
<template> ... </template> <script> /* ... */ </script> <style> /* ... */ </style>