vue代码规范

2020-04-01  本文已影响0人  小小烦恼

1,vue文件命名:主文件以 XxxIndex.vue 命名,开头首字母大写;弹窗增删改查组件XxxDialog.vue命名;其他文件以有 Xxx 意义方式命名,尽量以模块英文单词全名命名,不要使用简写;
2,所有的公共方法不再 main.js 里面引入(除了 http,api );
3, 所有自建.vue文件里面的<style lang="scss"scoped>;
标签要加scoped属性,避免污染全局样式;
4,所有自建.vue data里面的数据必须加注释,注明参数的意义,所有computed,methods,watch里面的方法必须加注释,props父级数据必须加注释,对感觉稍微难点的逻辑判断必须加注释;

/*
 *  多行注释
 */
// 单行注释

5,尽量不要使用$root、$parent、$refs等边界方法;
6,运算符必须用前后空格分开,例如:a === b;
7,v-for必须配合:key一起使用;
8,v-forv-if不要放到一个标签里面使用;
9,标签上的多个属性不要写到一行,应多行分隔;
例如:

<temp-pipe
        v-for="(pipe,index) in db.pipeData"
        :data="pipe"
        :key="'0' + index"
        :downData="pipe.pipe_down"
></temp-pipe>

10,组件表达式({{}})应放简单的表达式,复杂的表达式应该放到computed或者methods里面去处理;
11,接口请求的函数名必须加fetchXxxx;
12,点击/鼠标移入事件方法名必须加handleXxxx;
13,所有的列表请求必须加loading处理,包含btn的数据请求;
14,所有模块组件Vue自定义的组件引入方式
例如:

定义:import   TempSwitch   from   './'
引入:<temp-switch></temp-switch>

15,所有公共组件Vue自定义的组件引入方式
例如:

定义:import   CompSwitch   from   './'
引入:<comp-switch></comp-switch>

16,分装的公共方法使用Class
例如:

class 类名 {
    constructor () {
        // 构造方法
    }
    today () {
      // 自定义方法
    }
}
export default new 类名();
注意:类名一般首字母大写

17,正确使用const(常量) 和let(变量)
18,打包完成之后,尽量要用server.js去跑下打包后的生产文件
19,关闭子级弹窗尽量使用对象的属性去关闭,
例如:父级:

data() {
    return {
        isDialog:{
        show:true
      };
    };
},

子级:

this.isDialog.show = false

20,methods里面的函数代码行不能超过30行,超过30行要子封装
21,现在所有项目的UI组件统一迁移iviews
22,代码空四格

上一篇 下一篇

猜你喜欢

热点阅读