风格指南

介绍

在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 Vue 官方风格指南

组件数据

组件的 data 必须是一个函数。

  1. // bad
  2. exportdefault{
  3. data:{
  4. foo:'bar'
  5. }
  6. }
  7. // good
  8. exportdefault{
  9. data (){
  10. return{
  11. foo:'bar'
  12. }
  13. }
  14. }

单文件组件文件名称

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。

  1. // bad
  2. mycomponent.vue
  3. myComponent.vue
  4. // good
  5. my-component.vue
  6. MyComponent.vue

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

  1. // bad
  2. components/
  3. |-TodoList.vue
  4. |-TodoItem.vue
  5. └─TodoButton.vue
  6. // good
  7. components/
  8. |-TodoList.vue
  9. |-TodoListItem.vue
  10. └─TodoListItemButton.vue

自闭合组件

在单文件组件中没有内容的组件应该是自闭合的。

  1. <!-- bad -->
  2. <my-component></my-component>
  3. <!-- good -->
  4. <my-component/>

Prop 名大小写

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。

  1. // bad
  2. exportdefault{
  3. props:{
  4. 'greeting-text':String
  5. }
  6. };
  7. // good
  8. exportdefault{
  9. props:{
  10. greetingText:String
  11. }
  12. }
  1. <!-- bad -->
  2. <welcome-messagegreetingText="hi"/>
  3. <!-- good -->
  4. <welcome-messagegreeting-text="hi"/>

Props 换行

多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。

  1. <!-- bad -->
  2. <my-componentfoo="a"bar="b"baz="c"/>
  3. <!-- good -->
  4. <my-component
  5. foo="a"
  6. bar="b"
  7. baz="c"
  8. />

指令缩写

指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:

  1. <!-- bad -->
  2. <input
  3. v-bind:value="value"
  4. v-on:input="onInput"
  5. >
  6. <!-- good -->
  7. <input
  8. :value="value"
  9. @input="onInput"
  10. >

Props 顺序

标签的 Props 应该有统一的顺序,依次为指令、属性和事件。

  1. <my-component
  2. v-if="if"
  3. v-show="show"
  4. v-model="value"
  5. ref="ref"
  6. :key="key"
  7. :text="text"
  8. @input="onInput"
  9. @change="onChange"
  10. />

组件选项的顺序

组件选项应该有统一的顺序。

  1. exportdefault{
  2. name:'',
  3. mixins:[],
  4. components:{},
  5. props:{},
  6. data(){},
  7. computed:{},
  8. watch:{},
  9. created(){},
  10. mounted(){},
  11. destroyed(){},
  12. methods:{}
  13. };

组件选项中的空行

组件选项较多时,建议在属性之间添加空行。

  1. exportdefault{
  2. computed:{
  3. formattedValue(){
  4. // ...
  5. },
  6. styles(){
  7. // ...
  8. }
  9. },
  10. methods:{
  11. onInput(){
  12. // ...
  13. },
  14. onChange(){
  15. // ...
  16. }
  17. }
  18. };

单文件组件顶级标签的顺序

单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。

  1. <template>
  2. ...
  3. </template>
  4. <script>
  5. /* ... */
  6. </script>
  7. <style>
  8. /* ... */
  9. </style>

风格指南  - 图1