Vue编码风格

Vue编码风格

目前只整理部分自己在前端VUE框架组件编码时的风格，是对官网和一些大佬好的编码风格的总结。

<template>
<!-- 组件名字应该以大写字母开头，组件最外层节点类名和组件文件名保持一致，PascalCase改成下划线 -->
  <div class="the_test">
    <!-- 属性定义应该先定义原生属性，再定义Vue属性 -->
    <div class="data-picker" ref="reference" @click="handleClick"></div>
  </div>
</template>

<script>
/**
 * 模块定义：
 * 1.先第三方后自定义
 * 2.除非是组件内部私有模块，否则全部使用 “ @ ”  绝对路径引用
 * 3.按需引用
 */

 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
 import Input from '@/components/input';
 import DateTable from './DateTable.vue';
import { namespace } from 'vuex-class';


export default {
  data () {
    return {
    }
  }
}
</script>

<style  scoped >

/* css书写顺序：
        以 (布局方式，位置)--->(尺寸)--->(文本相关)--->(视觉效果) 的顺序书写，提高代码可读性
        
        (布局方式，位置) 相关属性包括：position,top,left,right,bottom,float,display,overflow
        (尺寸) 相关属性包括：border,margin,padding,width,height
        (文本相关) 相关属性包括：font,line-height,text-align,text-decoration
        (视觉效果) 相关属性包括：background,color,transition


*/

</style>

说白了就是敲代码，虽然是底层程序员，但是也得把活干的漂亮，精益求精