Skip to content

Latest commit

 

History

History
213 lines (178 loc) · 4.54 KB

vue.md

File metadata and controls

213 lines (178 loc) · 4.54 KB
Raw

vue编码规范

简介

该文档主要的设计目标是定义前端vue代码的书写规范，便于开发资源的共享和复用,后期维护以及code review

vue组件命名规范

  • 有意义的: 不过于具体，也不过于抽象
  • 简短: 2 到 3 个单词，单词之间使用连字符分隔，所有单词均小写
  • 具有可读性: 以便于沟通交流
<!-- 推荐 -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<!-- 避免 -->
<ui-slider></ui-slider> <!-- ui 前缀太过于宽泛，在这里意义不明确 -->
<slider></slider> <!-- 太过于宽泛 -->

vue组件书写规范

  • 使用单文件.vue文件格式来组件代码
  • template--> script--> style 的顺序书写,如下所示
<!-- 推荐-->
<template></template>
<script></script>
<style></style>

<!--避免 -->
<template></template>
<style></style>
<script></script>
  • vue的指令尽可能的采用缩写形式
<!--推荐-->
<a @click="pass">pass</a>

<!--避免-->
<a v-on:click="pass()">pass</a>
  • 避免直接操作DOM节点，推荐通过ref属性来访问组件和DOM节点
  • 组件设置name属性，借助于vue devtools可以让你更方便的测试
<!--推荐-->
export default {
    // 不要忘记了 name 属性
    name: 'mt-button',
    // 生命周期函数
    beforeCreate() {},
    mounted() {}
  };

<!--避免-->
export default {
    // 生命周期函数
    beforeCreate() {},
    mounted() {}
  };
  • 生命周期钩子函数按照执行顺序来书写
<!--推荐-->
export default {
    ...
    // 生命周期函数
    created()  {},
    mounted() {}
};

<!--避免-->
export default {
     ...
    // 生命周期函数
    mounted () {},
    created()  {}
}
  • 一个事件的名字对应组件外的一组意义操作，如：upload-success、upload-error ，单词之间用连字符分割
  • 组件表达式简单化，复杂的表达式建议用computed属性来代替
<!-- 推荐 -->
<template>
  <h1>
    {{ `${year}-${month}` }}
  </h1>
</template>
<script type="text/javascript">
  export default {
    computed: {
      month() {
        return this.twoDigits((new Date()).getUTCMonth() + 1);
      },
      year() {
        return (new Date()).getUTCFullYear();
      }
    },
    methods: {
      twoDigits(num) {
        return ('0' + num).slice(-2);
      }
    },
  };
</script>

<!-- 避免 -->
<template>
  <h1>
    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
  </h1>
</template>
  • props属性提供默认值，并使用type属性校验类型
<!-- 推荐 -->
  export default {
    props: {
      max: {
        type: Number, // 这里添加了数字类型的校验
        default() { return 10; } //提供默认值
      }
    }
  };
<!--避免-->
  export default {
    props: {
      max: Number
      }
  };
  • 调用方法时推荐直接使用this调用组件实例方法，不要在代码中这样写：const self = this(除非不能直接访问到组件实例)
<!-- 推荐 -->
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      console.log(this.hello());
    },
  },
};


<!-- 避免 -->
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      const self = this; // 没有必要
      console.log(self.hello());
    },
  },
};
  • 避免直接使用this.$parent,而是通过props将值传递给子组件，或者在子组件触发事件来通知父组件
  • 如果用到自定义指令,自定义过滤器，为了提高复用性，推荐把自定义指令和过滤器单独拆离。将自定义指令放在global/filters下，自定义过滤器放在global/directives下
  • 前端静态数据推荐存储为单独的js文件，组件上的数据通过属性字段来访问，优化精简代码结构(如推荐8）
<!-- 推荐 -->
<group-title>
    <h1>{{submitTitle[type].title}}</h1>
    <p>{{submitTitle[type].dec}}</p>
</group-title>

<!-- 避免 -->
<group-title v-if="type==='redeemLoan'">
    <h1>文字1</h1>
    <p>描述1</p>
</group-title>

<group-title v-if="type==='finalpayLoan'">
    <h1>文字2</h1>
    <p>描述2 </p>
</group-title>

vue组件引用规范

  • 推荐按需加载使用组件
  • 导入组件时使用大驼峰式命名法
<!-- 推荐 -->	
import { Panel, Grid, PopupPicker } from '../../components';

<!-- 避免 -->
import Panel from '../components/panel.vue';
import Grid from '../components/grid.vue';
import Loading from '../components/popup-picker';