前端代码规范2

 代码规范的意义和目的

• 规范的代码可以促进团队合作
• 规范的代码可以减少bug处理 规范的代码可以降低维护成本 规>- 范的代码有助于代码审查
• 养成代码规范的习惯，有助于程序员自身的成长

---

 1. 组件为多个单词

Vue.component('todo-item', {})
export default { name: 'TodoItem',}

---

 2. Pro定义

props: {
  status: String
}
// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

---

 3. Pro名大小写

props: {
  greetingText: String
}

---

 4. v-for 设置键值是dom diff 性能优化所必须的

<div v-for=(item,index) in data :key="index">

</div>

• item对应每个单元数据，index表索引，key这样就是可以提供唯一的索引

---

5. 组件文件

components/
|- TodoItem.js
|- TodoItem.vue

---

 6. 单文件组件文件的大小写

components/
|- MyComponent.vue

---

 7. 基础组件

应用特定样式和约定的基础组件 应该全部以一个特定的前缀开头，比如 Base。
components/
|- BaseButton.vue

---

 8. 紧密耦合的组件名

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

---

9. 组件名中的单词顺序

 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
 components/
 |- SearchButtonClear.vue
 |- SearchButtonRun.vue
 |- SearchInputQuery.vue
 |- SearchInputExcludeGlob.vue
 |- SettingsCheckboxTerms.vue
 |- SettingsCheckboxLaunchOnStartup.vue

---

 10. 模板中的组件名大小写 做法没啥问题不过vue 新版本已经优化 可以直接写驼峰命名组件

<!-- 在所有地方 -->
<my-component></my-component>

这种方式不利于新手查询代码排错。可以直接采用，推荐

<MyComponent></MyComponent>

---

 11. 命名规则

项目名，目录名，js文件名，css/Scss文件名，HTML文件名 均采用小写方式，以中横杠(-)分隔
例子：my-project-name

---

 12. utils 中common validate 方法定义

common 方法定义 以tansun 为前缀
constant 常量定义 以TS_ 为前缀 并且使用大写

---

 13. 每个文件的顶部建议添加统一格式的注释

>建议下载一个 koroFileHeader 插件，配置统一的模版风格，明确每个文件的用途和注意事项
setting配置
[Vscode插件安装教程](https://www.jianshu.com/p/3c43e8805557)
[webStorn配置教程](https://www.cnblogs.com/byx1024/p/12208009.html) 使用///+tab

"fileheader.customMade": {
    "Author": "Evan-li",//可以写自己的常用名
    "Date": "Do not edit",
    "LastEditors": "Evan-li",//可以写自己的常用名
    "LastEditTime": "Do not edit",
    "Description": ""
},

效果

<!--
 * @Author: Evan-li
 * @Date: 2020-03-10 14:49:27
 * @LastEditors  : Evan-lian
 * @LastEditTime : 2020-03-10 15:01:13
 * @Description: 
 -->

---

 14. 项目主体技术栈是vue 建议大家统一vue单文件风格 一键式生成vue模版文件，在vscode 中配置 vue.json 直接敲vue 生成模版

webStorn配置教程

{
"Print to console": {
    "prefix": "vue",
    "body": [
    "<template>",
    " <div>\n",
    " </div>",
    "</template>\n",
    "<script>",
    " export default {",
    "   data () {",
    "     return {\n",
    "     }",
    "   },",
    "   computed: {\n",
    "   },",
    "   components: {\n",
    "   }",
    "   created () {\n",
    "   },",
    "   methods: {\n", 
    "   },",
    " }",
    "</script>\n",
    "<style lang='less' scoped >\n",
    " ",
    "</style>",
    "$2"
    ],
    "description": "Log output to console"
  }
}