Vant 风格指南
发布时间：2023-04-20 11:28:12 所属栏目：教程 来源：
导读：在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 Vue 官方风格指南。
组件的 data 必须是一个函数。
// bad
export default {
data: {
foo: 'bar'
}
}
// good
组件的 data 必须是一个函数。
// bad
export default {
data: {
foo: 'bar'
}
}
// good
|
在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 Vue 官方风格指南。 组件的 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 名大小写 在声明 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 的元素应该分多行撰写，每个 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 顺序 标签的 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: { oninput() { // ... }, onChange() { // ... } } }; 单文件组件顶级标签的顺序 单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。 <template> ... </template> <script> /* ... */ </script> <style> /* ... */ </style> （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
