vue代码规范

项目规范

1. 项目名称根据项目来命名。
2. 项目层级文件夹按照业务功能命名。
3. 合适的编译工具。
4. 合适的代码规范插件。
5. 合适的UI辅助框架。

代码规范

---

vue 文件基本结构

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

文件名称规范

1. 单文件组件

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)**

|-VideoUpload.vue
|-video-upload.vue

2. 组件文件

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。可以快速区分找到需要的文件,增加可读性

components/
|- UserList.vue
|- UserItem.vue

3. 完整的单词组件名

组件名应该倾向于完整单词而不是缩写。

components/
|- UserOrder.vue
|- UserVideo.vue

指令规范

1. 指令有缩写一律采用缩写形式

  // bad
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"
 
  // good
  :class="{'show-left'：true}"
  @click="getListData"

2. v-for设置键值

key必须和v-for循环使用（唯一性），以便维护内部组件及其子树的状态

  

  

    {{ user.name }}
  

3. v-for避免和v-if一起使用,

为了避免渲染本应该被隐藏的列表

class样式名规范

应该为横线链接(kebab-case)组合,并且以功能去定义名称，方便阅读。

method 方法命名命名规范

驼峰式命名，统一使用动词或者动词+名词形式

导出

代码注释

复杂的业务逻辑和特殊的场景，应该有相应的注释，便于后期维护和理解。

1. 单行注释

  // 姓名
  var name = “abc”;    

2.多行注释

组件使用说明，和调用说明
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  
      **/

git提交规范

---

可以过滤某些commit（比如文档改动），便于快速查找信息。
如：git commit -m "feat:增加了某些新的功能"

feat：新功能（feature）

fix：修补bug

docs：文档（documentation）

style： 格式（不影响代码运行的变动）

refactor：重构（即不是新增功能，也不是修改bug的代码变动）

test：增加测试

chore：构建过程或辅助工具的变动