vue.js组件使用和开发规范

参考:Vue.js风格指南

开发规范

开发之前

尽量使用最新ES语法,具体如下:

  • 正确使用constlet替代var
  • 使用模板字符串${this.data}
  • 将工具函数等依赖单独分离,并用import导入
  • 对象字面量缩写、箭头函数
  • 通用工具集可以在utils/assist内扩展
  • local/routers内测试组件

组件

1,命名

  • 尽量简单、表意
  • export 出的对象是用驼峰命名法,比如 PageButtonItem
  • 如组件需要嵌套使用,子组件命名在父组件后加-item,比如timelinetimeline-item

2,目录

  • 组件应在目录 compoents/下,每个组件要有单独的目录,目录命名是用小写,入口文件为index.js,导出组件,再由index.js 暴露给使用者
  • 每个组件的文件名当使用小写, 但必须与组件的名称一致,比如 timeline.vuetimeline-item.vue

3,属性

  • 必须规定type或者使用validator进行验证
  • 如果validator验证为几个值中的一个,则使用utils/assist内的oneOf函数进行验证
  • 如果有尺寸的参数size,则只能使用smalllarge,默认是适中,可不写

事件

1,命名

  • 使用on- 为前缀,比如on-change

2,规范

  • 使用$emit来对外触发事件,而不用$dispatch$broadcast
  • 嵌套组件之间通信,使用$parent$children,而不用$emit,避免使用这错误使用自定义事件

其他

  • css前缀

使用规范

使用 :prop 传递数据类型为数字boolean时,必须带 :,比如:

正确的使用方法:

<Page :current=1 :total="100"></Page>

错误的使用方法:

<Page current="1" total="100"></Page>