vue规范 | XMwarrior

vue

前端

发布日期: 2020-01-14

文章字数: 394

阅读时长: 1 分

阅读次数:

1.组件选项顺序

<!-- component name -->
<template>
  <div></div>
</template>

<script>
export default &#123;
  name: "",
  components: &#123;&#125;,
  props: &#123;&#125;,
  data() &#123;
    return &#123;&#125;;
  &#125;,
  watch: &#123;&#125;,
  computed: &#123;&#125;,
  mounted() &#123;&#125;,
  methods: &#123;&#125;
&#125;;
</script>
<style lang="less" scoped></style>

2.命名

1.类名、构造函数，使用名词，大写字母开头。

new Point()

2.函数名，使用动宾短语。

getAssetInfo()&#123;&#125;

3.boolean 类型的变量使用 is 或 has 开头。

isLoading = true;
hasChildren = false;

5.id 采用驼峰式命名，class 采用横线连接(kebab-case)命名，保证语义化，禁止采用缩写。

#mapContainer
.grid-box

6.文件夹命名、css、less、js 文件采用小驼峰式命名。

reset.css
common.less
userPermission.js
ElTableColumnPro.vue

7.vue 组件命名，组件名为多个单词，采用大驼峰式命名，尽量是名词。

3.注释

单行注释

// 函数描述

多行注释

/**
 * 函数描述
 * @param &#123;参数类型&#125; 参数名 参数描述(可选)
 * @return &#123;返回类型&#125; 返回描述
 */

4.书写规范

html(templete)

js

1.Prop 定义尽量详细，必须指定参数类型，必要时设置默认值。

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

2.console.log、debugger使用完及时删除。
3.私有方法使用下划线开头

_getPromoteAmount: function() &#123;&#125;

4.采用 ES6 关键字const、let定义变量，优先级顺序 const>let，避免使用var。
5.循环语句添加key

6.不同功能 data 变量用注释分割。
7.函数参数，如有布尔值参数需对象方式传参。

getList(&#123;isByTreeSelect:true&#125;)

8.函数尽量遵循单一原则。
9.始终使用 === 和 !== 而不是 == 和 !=。
10.js语句以分号;结尾，禁止省略。
11.用JavaScript高级函数代替for-in、 for-of。 Why? 这强调了我们不可变的规则。处理返回值的纯函数比副作用更容易。用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / … , 用对象的这些方法 Object.keys() / Object.values() / Object.entries() 去产生一个数组，这样你就能去遍历对象了。
12.不要保存引用this，用箭头函数或函数绑定Function#bind
13.不要用前置或后置下划线。

css

1.尽量减少组件内部scoped样式
- 尽量减少单文件组件内部样式，提高公共样式的复用。常量类样式如颜色、统一边距、多处复用的样式，封装为less变量使用，统一存放到variable.less样式文件内引用。
- 尽量不要改变元素默认行为，保持默认的文本流。
- 避免嵌套层级过多（嵌套深度限制在2-3级）。

@labelColor:#C0C4D6;
@textColor:#333333;
.scrollbar &#123;
  &::-webkit-scrollbar &#123;
    /*滚动条整体样式*/
    width: 4px;
    height: 14px;
  &#125;
  &::-webkit-scrollbar-thumb &#123;
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0);
    background: rgba(11, 141, 233, 1);
  &#125;
  &::-webkit-scrollbar-track &#123;
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: rgba(11, 141, 233, 0.3);
  &#125;
&#125;