mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: delete out-dated style guide (#11511)
This commit is contained in:
parent
ccf7705ad3
commit
c2b20176d2
@ -1,204 +0,0 @@
|
|||||||
# 风格指南
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 [Vue 官方风格指南](https://v3.cn.vuejs.org/style-guide/)。
|
|
||||||
|
|
||||||
### 组件数据
|
|
||||||
|
|
||||||
组件的 data 必须是一个函数。
|
|
||||||
|
|
||||||
```js
|
|
||||||
// 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
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自闭合组件
|
|
||||||
|
|
||||||
在单文件组件中没有内容的组件应该是自闭合的。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- bad -->
|
|
||||||
<my-component></my-component>
|
|
||||||
|
|
||||||
<!-- good -->
|
|
||||||
<my-component />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Prop 名大小写
|
|
||||||
|
|
||||||
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。
|
|
||||||
|
|
||||||
```js
|
|
||||||
// bad
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
'greeting-text': String,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// good
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
greetingText: String,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- bad -->
|
|
||||||
<welcome-message greetingText="hi" />
|
|
||||||
|
|
||||||
<!-- good -->
|
|
||||||
<welcome-message greeting-text="hi" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 指令缩写
|
|
||||||
|
|
||||||
指令缩写,用 `:` 表示 `v-bind:` ,用 `@` 表示 `v-on:`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- bad -->
|
|
||||||
<input v-bind:value="value" v-on:input="onInput" />
|
|
||||||
|
|
||||||
<!-- good -->
|
|
||||||
<input :value="value" @input="onInput" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Props 顺序
|
|
||||||
|
|
||||||
标签的 Props 应该有统一的顺序,依次为指令、属性和事件。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<my-component
|
|
||||||
v-if="if"
|
|
||||||
v-show="show"
|
|
||||||
v-model="value"
|
|
||||||
ref="ref"
|
|
||||||
:key="key"
|
|
||||||
:text="text"
|
|
||||||
@input="onInput"
|
|
||||||
@change="onChange"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 组件选项的顺序
|
|
||||||
|
|
||||||
组件选项应该有统一的顺序。
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
name: '',
|
|
||||||
|
|
||||||
components: {},
|
|
||||||
|
|
||||||
props: {},
|
|
||||||
|
|
||||||
emits: [],
|
|
||||||
|
|
||||||
setup() {},
|
|
||||||
|
|
||||||
data() {},
|
|
||||||
|
|
||||||
computed: {},
|
|
||||||
|
|
||||||
watch: {},
|
|
||||||
|
|
||||||
created() {},
|
|
||||||
|
|
||||||
mounted() {},
|
|
||||||
|
|
||||||
unmounted() {},
|
|
||||||
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 组件选项中的空行
|
|
||||||
|
|
||||||
组件选项较多时,建议在属性之间添加空行。
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
computed: {
|
|
||||||
formattedValue() {
|
|
||||||
// ...
|
|
||||||
},
|
|
||||||
|
|
||||||
styles() {
|
|
||||||
// ...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onInput() {
|
|
||||||
// ...
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange() {
|
|
||||||
// ...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 单文件组件顶级标签的顺序
|
|
||||||
|
|
||||||
单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<template> ... </template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/* ... */
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* ... */
|
|
||||||
</style>
|
|
||||||
```
|
|
@ -100,10 +100,6 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io');
|
|||||||
path: 'design',
|
path: 'design',
|
||||||
title: '设计资源',
|
title: '设计资源',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'style-guide',
|
|
||||||
title: '风格指南',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'locale',
|
path: 'locale',
|
||||||
title: '国际化',
|
title: '国际化',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user