美文网首页
vue代码规范

vue代码规范

作者: 小小烦恼 | 来源:发表于2020-04-01 16:38 被阅读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,代码空四格

相关文章

  • Vue.js 组件编码规范

    Vue.js 组件编码规范 目标 本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特...

  • VUE代码规范

    标准

  • Vue 代码规范

    1.Vue 组件命名 有意义的: 不过于具体,也不过于抽象 简短: 2 到 3 个单词 具有可读性: 以便于沟通交...

  • vue代码规范

    非原创,转公司的,觉得很不错想保存下来,侵权删 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 以及...

  • vue代码规范

    1,vue文件命名:主文件以 XxxIndex.vue 命名,开头首字母大写;弹窗增删改查组件XxxDialog....

  • Vue项目代码规范

    一、UI框架及css预处理器选择 1、PC端Vue项目UI框架:ElementUI(优先)、iView2、移动端V...

  • vue开发规范梳理

    为了前端代码形成统一的风格,制定该代码规范(该规范部分参照VUE官网介绍的风格指南以及常用的规范) 1.文件夹命名...

  • VUE项目规范

    一简介 此规范基于脚手架vue-cli3.+ 从编写IDE,到项目结构,命名规范,代码风格,包括代码逻辑等,都做了...

  • 编程的习惯

    阿里巴巴出品的java规范JavaScript代码规范VUE编写规范 子日:少成若天性,习惯如自然。 我每次学习一...

  • vetur+prettier+eslint 实现vue代码格式化

    前端vue代码用eslint做了代码格式校验,规范用的这个http://alloyteam.github.io/C...

网友评论

      本文标题:vue代码规范

      本文链接:https://www.haomeiwen.com/subject/spyauhtx.html