vue规范

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;

5.vscode统一拓展插件使用

6.其他

  1. 提高代码复用,两遍及以上的代码重复需合并(函数复用、样式复用、templete模板不能重复)。

  2. 优先框架组件使用,其次优质组件,其次自定义组件样式。

  3. 公共组件,需抽象化命名属性及方法名。

  4. 导入组件优先使用 npm 优质高 star 组件,优先使用 es6 模块导入方式import,选择组件需两人以上共同决定。

  5. 尽量避免父子组件强耦合绑定属性。

  6. 保证注释同步更新,多余注释及时删除(多余html、css、js注释)。


  转载请注明: XMwarrior vue规范

 上一篇
Eslint rules字典 Eslint rules字典
Eslint rules字典规则级别 “off” 或 0 - 关闭规则 “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出) “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发
下一篇 
reduce方法应用技巧 reduce方法应用技巧
定义和用法reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。注意: reduce() 对于空数组是不会执行回调函数的。 浏览器支持 方法 Chrome Edge Firefox Safa
2019-10-09
  目录