前言

为Vue项目制定开发规范

编码要求：

基于模块开发（单一职责）

一般来说，尽量保证每一个Vue 文件的代码行数不要超过100行。（要解耦合，要封装）
每一个Vue界面必须专注于解决一个单一的问题，是独立的、可复用的、微小的和可测试的。
除注释以外代码中不能有汉字、数字、非变量的英文字符。（建议使用常量、变量的形式来定义）
所有的汉字都需要抽成配置文件，代码里不要出现汉字，这样符合国际化（i18n）的需求

组件命名
组件的命名需遵从以下原则：
有意义的: 不过于具体，也不过于抽象
简短: 2 到 3 个单词
具有可读性: 以便于沟通交流

例子： ```html


<a name="6kcdh"></a>
## 组件 props 原子化
虽然 Vue.js 支持传递复杂的 JavaScript 对象通过 props 属性，但是你应该尽可能的使用原始类型的数据。尽量只使用 JavaScript 原始类型（字符串、数字、布尔值）和函数。尽量避免复杂的对象。
<a name="4LV69"></a>
### 为什么？
- 使得组件 API 清晰直观。
- 只使用原始类型和函数作为 props 使得组件的 API 更接近于 HTML(5) 原生元素。
- 其它开发者更好的理解每一个 prop 的含义、作用。
- 传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。
例子：
```html
<!-- 推荐 -->
<range-slider
  :values="[10, 20]"
  min="0"
  max="100"
  step="5"
  :on-slide="updateInputs"
  :on-end="updateResults">
</range-slider>
<!-- 避免 -->
<range-slider :config="complexConfigObject"></range-slider>

组件结构化

按照一定的结构组织，使得组件便于理解。

例子：

<template lang="html">
 <div class="Ranger__Wrapper">
   <!-- ... -->
 </div>
</template>
<script type="text/javascript">
 export default {
   // 不要忘记了 name 属性
   name: 'RangeSlider',
   // 组合其它组件
   extends: {},
   // 组件属性、变量
   props: {
     bar: {}, // 按字母顺序
     foo: {},
     fooBar: {},
   },
   // 变量
   data() {},
   computed: {},
   // 使用其它组件
   components: {},
   // 方法
   watch: {},
   methods: {},
   // 生命周期函数
   beforeCreate() {},
   mounted() {},
 };
</script>
<style scoped>
 .Ranger__Wrapper { /* ... */ }
</style>