# 文件相关

# 文件命名

文件命名参考文件命名参考
多个单词组成的文件命名应该遵守,以短横线(-)进行连接
弹窗类组件必须明确以 dialog 结尾

//新增用户弹窗
add-user-dialog.vue //推荐
add-user-model.vue //不推荐
add-user-popup.vue //不推荐

1
2
3
4

文件名称遵循 动词 + 形容词 + 名称 + 特殊含义(弹窗等标准组件命名)

//新增用户组件
add-user.vue //推荐
add-single-user.vue //推荐
user-add.vue //不推荐
adduser.vue //不推荐

1
2
3
4
5

对于弹窗类组件，结尾必须包含弹窗标识 model

# 单文件组件

# 通用

单个.vue文件内容不超过300行，可以通过拆分文件减少单文件代码行数
静止过长的三目运算(只允许一层三目运算)
vue 里面所有变量和方法必须写注释
禁止模板事件里面做复杂操作(除了单个变量赋值或者无参数路由跳转)

<template>
    <!-- 不推荐 -->
    <div class="user" @click="userName ? isAdmin = true : null">
    <!-- 单独赋值可以，但最好逻辑都放在method里面 -->
    <el-button @click="commodityState = false">确定</el-button>
    <!-- 推荐 -->
    <div class="user" @click="handleCheckUserInfo">
</template>

1
2
3
4
5
6
7
8

if语句后面必须跟着代码注释

//不推荐
if (type === 1) {
    //...
} else if (type === 2) {
    //...
}
//推荐
if (type === 1) { //抽样类型为监督抽检则..., 1代表监督抽检
    //...
} else if (type === 2) { //抽样类型为评价性抽检则...，2代表评价性抽检
    //...
}

1
2
3
4
5
6
7
8
9
10
11
12

const foo = type === 1 ? "主检人" : type === 2 ? "审核人" : type === 3 ? "批准人" : type === 4 ? "发送人" : "角色切换";

TIP

不一味追求代码简短，可读性非常重要

# 模板相关

单文件组件不应该包含无用标签，避免过度嵌套


<template>
    <div>// 过度嵌套
        <div class="fruit">
            <div>苹果</div>
            <div>香蕉</div>
            <div>菠萝</div>
        </div>
    </div>
</template>
// 正确写法
<template>
    <div class="fruit">
        <div>苹果</div>
        <div>香蕉</div>
        <div>菠萝</div>
    </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# data相关

注释书写规范


<script>
export default {
    //不推荐
    data: {
        finallyScore: 0,
        loading: false,
        areaName: "全省",
        num: 0,
    },
    //还可以写的更好
    data: {
        loading: false, //初始化加载效果
        userInfo: {}, //用户信息
        areaName: "", //地区名称
        dialogVisible: false, //新增用户弹窗
    },
    //推荐写法(分类并且对其)
    data: {
        //==========================请求参数=============================//
        parentId: "", //--------------------------上级菜单ID 
        menuName: "", //--------------------------菜单/按钮名称 
        path: "", //------------------------------对应路由
        perms: "", //-----------------------------权限标识 
        icon: "", //------------------------------图标 
        //==========================验证参数============================//
        rules: {
            menuName: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
            path: [{ required: true, message: "请填写对应路由", trigger: "blur" }],
            perms: [{ required: true, message: "请填写权限标识", trigger: "blur" }],
        },
        //==========================其他参数==============================//
        loading: false, //-------------------------新增用户加载效果
    },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 计算属性

复杂计算数据多利用计算属性

//不推荐
<div>{{ price * count }}元</div>

//推荐
<div>{{ totalPrice }}元</div>
computed: {
    totalPrice() {
        return price * count
    }
}

1
2
3
4
5
6
7
8
9
10

# method相关

方法注释和命名规范
不管是数据还是方法，都推荐分组注释不允许出现无注释的数据和方法
初始化操作推荐以 init开头，例如：初始化echarts initEcharts
对于远程获取数据推荐以 get 开头，例如：获取用户信息 getUserInfo
对于点击(或其他有动作的操作)推荐以 handle开头，例如：下拉选择用户 handleSelectUser

<script>
//推荐单文件组件方法按照以下业务逻辑来进行方法分组。
export default {
    methods: {
        //===============初始化相关==============//
        initData() {},
        //===============获取远程数据============//
        getTableInfo() {},
        //===============前后端交互=============//
        addUser() {},
        //===============组件间交互=============//  
        openDialog() {},
        //===============其他操作==============//
        closeTable() {},
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# style相关

← 简介