Vue开发规范

一：开发规范目的

为提高团队协作效率，规范文件管理，方便项目后期维护，提高代码质量

二：命名规范

1.普通变量命名规范

命名方法：驼峰式命名法
命名规范：
a:语义化命名，命名必须是跟需求的内容相关的词

const proList = "产品列表页";

b: 命名是复数的时候需要加s

const names = new Array();

2.常量

命名方法：全部大写
命名规范：
使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_LIST = 2;
const URL = 'https://www.baidu.com/';

3.组件命名规范

命名方法：驼峰式命名
命名规范：公用组件以kunyi(公司缩写)开头

kunyiLeyi
kunyiYhc

页面内部组件以组件模块名简写为开头，Item 为结尾

StaffBenchToChargeItem
StaffBenchAppNotArrItem

4.method 方法命名命名规范

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

getListData

请求数据方法，以 data 结尾

getListData、postFormData

事件方法以 on 开头

onTypeChange、onUsernameInput

5.views 下的文件夹命名

尽量是名词,且使用驼峰命名法

workbenchIndex

开头的单词就是所属模块名字

workbenchList

6.props 命名

在声明 prop 的时候，使用驼峰命名法，在模板中使用 kebab-case

<script>
props: {
    greetingText: String
}
</script>
<welcome-message greeting-text="hi"></welcome-message>

三：结构化规范

1.页面存放目录：文件夹命名均首字母大写
2.静态文件存放目录：所有文件及文件夹命名均为小写

组件选项顺序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch

元素特性顺序

原生属性放前面，指令放后面

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind

四：编码规范

1.指令规范：

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

:class="{'show-left'：true}"
@click="getListData"

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

2.Props 规范

Props 定义应该尽量详细

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