# 前端开发规范 v1.0.0
## 一、 制定规范的目的

提升团队代码的可读性和可维护性，增强团队协作效事，使团队成员养成良好的编码习惯以及严谨的编药思维并输出高质量的代码。

##  二、文件命名

### 原则

1. 使项目组的每-个成员能够方便的理解每一个文件的意义;
2. 当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们使用查找、修改、替换等操作。

### 规则
    
1. 有意义的名词、简短、具有可读性
2. 以英文字母(小写)开头，驼峰或**短横杠**命名，其中不得包含汉字、空格和特殊字符
3. 公共组件命名以公司名称简拼为命名空间(mt-xxx.vue)
4. 文件夹命名主要以功能模块代表命名
5. 每个模块文件夹下需具有 index.html、index.vue 或 index.js  文件
6. 每层文件夹下需具有 README.md 文件，用来添加文件夹内部的解释说明

### 示例

![文件命名示例](./doc/文件命名示例图片.png)

## HTML 及 Vue.js 编写规范

### 规则

#### HTML

1. 使用常用且熟悉的语义类标签，不能确定使用哪个就用 `div` 或 `span` 。  

   如: `<ul>/<ol> > <li> `, `<h1> - <h6>`, `<pre>`, `<a>`, `<button>`, `<input>`  
  
   **对于语义标签，我的态度是：
   “用对”比“不用”好，“不用”比“，“不用”比“用错”好。
   当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。**  
   [W3C标签列表参考](http://www.w3school.com.cn/tags/index.asp) 
   [MDN标签列表参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element) 

2. 显式指明使用到的属性，且属性值一定要有值并且用 `""`。如: `<button type="button">按钮</button>`
3. 省略结束标签请遵循 [MDN的HTML元素参考](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)  

    | 标签省略 | HTML元素举例 |
    |:----:|:---:|
    | 必须有一个开始标签，不允许有结束标签. | `<img src="./xx.png"/>` |
    | 不允许，开始标签和结束标签都不能省略。 | `<a></a>` |
    | 必须有开始标签但不必有结束标签。| `<input size="32"/>` `<input size="32"></input>`|
    
    **结束标签不存在时，在开始标签后加 `/`**
    
4. 给每个 `<table>`  和 `<form>`  加上唯一的 id
5. 给每个 `<img>` 加上 alt 属性

#### Vue.js

1. 模板结构  
    该模板是按照 vue 加载时的触发机制以及钩子执行顺序来定义的，
    其他选项请选择合适的位置插入。
    ```vue
    <template>
      <div>
        template example
      </div>
    </template>
    
    <script>
      export default {
        name: 'templateExample',
        components: {},
        props: {},
        data() {
           return {}
        },
        created() {},
        mounted() {},
        updated() {},
        beforeRouteUpdate(to, from, next) {},
        methods: {},
        filter: {},
        computed: {},
        watch: {}
      }
    </script>
    
    <style scoped>
    
    </style>
    ```
   
2. 组件参数传递  
    例子:  
    
    ![组件参数传递](./doc/组件参数传递图片.png)
    
3. vue指令规范  

    * 不要将 `v-if` `v-hide` 与 `v-for` 出现在同一标签内以免渲染本该隐藏的列表
    * `v-for` 需设置 `key` 避免页面出现警告，在多循环状态时，避免重复的`key`值，
    请使用具有唯一性的值。
     
4. $emit 规范

    每当添加一个`$emit`后需要在`README.md`处写上文档，告知组内人员避免事件重复
    
    例子:  
    

## CSS 编写规范

## VUE 规范
