mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Update STYLE_GUIDE.zh-CN.md
This commit is contained in:
parent
9379c6ce04
commit
285eb90b32
26
.github/STYLE_GUIDE.zh-CN.md
vendored
26
.github/STYLE_GUIDE.zh-CN.md
vendored
@ -1,6 +1,8 @@
|
|||||||
# 组件风格指南
|
# 风格指南
|
||||||
|
|
||||||
## 组件数据
|
在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)
|
||||||
|
|
||||||
|
### 组件数据
|
||||||
|
|
||||||
组件的 data 必须是一个函数。
|
组件的 data 必须是一个函数。
|
||||||
|
|
||||||
@ -22,7 +24,7 @@ export default {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 单文件组件文件名称
|
### 单文件组件文件名称
|
||||||
|
|
||||||
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
|
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
|
||||||
|
|
||||||
@ -36,7 +38,7 @@ my-component.vue
|
|||||||
MyComponent.vue
|
MyComponent.vue
|
||||||
```
|
```
|
||||||
|
|
||||||
## 紧密耦合的组件名
|
### 紧密耦合的组件名
|
||||||
|
|
||||||
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
|
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
|
||||||
|
|
||||||
@ -54,7 +56,7 @@ components/
|
|||||||
|- TodoListItemButton.vue
|
|- TodoListItemButton.vue
|
||||||
```
|
```
|
||||||
|
|
||||||
## 自闭合组件
|
### 自闭合组件
|
||||||
|
|
||||||
在单文件组件中没有内容的组件应该是自闭合的。
|
在单文件组件中没有内容的组件应该是自闭合的。
|
||||||
|
|
||||||
@ -66,7 +68,7 @@ components/
|
|||||||
<my-component />
|
<my-component />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Prop 名大小写
|
### Prop 名大小写
|
||||||
|
|
||||||
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。
|
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。
|
||||||
|
|
||||||
@ -94,7 +96,7 @@ export default {
|
|||||||
<welcome-message greeting-text="hi" />
|
<welcome-message greeting-text="hi" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## Props 换行
|
### Props 换行
|
||||||
|
|
||||||
多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。
|
多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。
|
||||||
|
|
||||||
@ -110,7 +112,7 @@ export default {
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 指令缩写
|
### 指令缩写
|
||||||
|
|
||||||
指令缩写,用 `:` 表示 `v-bind:` ,用 `@` 表示 `v-on:`
|
指令缩写,用 `:` 表示 `v-bind:` ,用 `@` 表示 `v-on:`
|
||||||
|
|
||||||
@ -128,7 +130,7 @@ export default {
|
|||||||
>
|
>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Props 顺序
|
### Props 顺序
|
||||||
|
|
||||||
标签的 Props 应该有统一的顺序,依次为指令、属性和事件。
|
标签的 Props 应该有统一的顺序,依次为指令、属性和事件。
|
||||||
|
|
||||||
@ -145,7 +147,7 @@ export default {
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 组件选项的顺序
|
### 组件选项的顺序
|
||||||
|
|
||||||
组件选项应该有统一的顺序。
|
组件选项应该有统一的顺序。
|
||||||
|
|
||||||
@ -175,7 +177,7 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## 组件选项中的空行
|
### 组件选项中的空行
|
||||||
|
|
||||||
组件选项较多时,建议在属性之间添加空行。
|
组件选项较多时,建议在属性之间添加空行。
|
||||||
|
|
||||||
@ -203,7 +205,7 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## 单文件组件顶级标签的顺序
|
### 单文件组件顶级标签的顺序
|
||||||
|
|
||||||
单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。
|
单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user