[Doc] add style guide (#1245)

.github/STYLE_GUIDE.zh-CN.md

@@ -0,0 +1,222 @@
+# 组件风格指南
+
+## 组件数据
+
+组件的 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" />
+```
+
+## Props 换行
+
+多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。
+
+```html
+<!-- bad -->
+<my-component foo="a" bar="b" baz="c" />
+
+<!-- good -->
+<my-component
+  foo="a"
+  bar="b"
+  baz="c"
+/>
+```
+
+## 指令缩写
+
+指令缩写，用 `:` 表示 `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: '',
+
+  mixins: [],
+
+  components: {},
+
+  props: {},
+
+  data() {},
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  destroyed() {},
+
+  methods: {}
+};
+```
+
+## 组件选项中的空行
+
+组件选项较多时，建议在属性之间添加空行。
+
+```js
+export default {
+  computed: {
+    formattedValue() {
+      // ...
+    },
+
+    styles() {
+      // ...
+    }
+  },
+
+  methods: {
+    onInput() {
+      // ...
+    },
+
+    onChange() {
+      // ...
+    }
+  }
+};
+```
+
+## 单文件组件顶级标签的顺序
+
+单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。
+
+```html
+<template>
+...
+</template>
+
+<script>
+/* ... */
+</script>
+
+<style>
+/* ... */
+</style>
+```