Vue.js代码检查

一、CSS

? ? ? ? 1、属性可安全的替换为速记形式

	.el-dialog .el-dialog__header + .el-dialog__body {
		padding: 0 40px;
		padding-top: 4px;
	}

    .el-dialog .el-dialog__header + .el-dialog__body {
        padding: 4px 40px 0;
    }

? ? ? ? 2、度量单位冗余

padding: 0px 20px;

// 修改后
padding: 0 20px;

? ? ? ? 3、字体属性font-family 没有通用默认值

font-family: PingFangSC, PingFangSC-Semibold;

// 修改之后
font-family: PingFangSC, PingFangSC-Semibold,serif;

? ? ? ? 4、无效的元素

? ? ? ? 无效的伪类选择器

    ::v-deepimg.el-tooltip {
	    margin-bottom: 0px;
    }

	::v-deep .el-table__body-wrapper::-moz-scrollbar {
		width: 6px;
		height: 10px;
	}

	::v-deep .el-table__body-wrapper::-moz-scrollbar-thumb {
		background-color: #ddd;
		border-radius: 3px;
	}

无效的属性值

<i class="el-icon-warning" style="color:#00C3AC;font-size:16px,margin-top:5px"></i>


.el-select-dropdown__item {
    align-items: top;
	white-space: wrap;
	transition: 0.2;
    margin-right: 12px 12px 12px 0;
    padding: 6px auto;
    color: 2e3440;
    font-weight: Medium;
}

.onlineItemDisable:hover {
    white-space: nowarp;
    font-weight: 500px;
	cursor: non-allowed;
    align-items: left;
    margin: 20px 18px 12px 180x;
    left: 160;
    box-shadow: 0, 2px, 12px, 0;
}

5、覆盖的属性

.el-icon-my-hide {
	background: url("~@/assets/img/icon_screen.png") no-repeat;
	background-repeat: no-repeat;
	background-position: center;
	height: 36px;
	width: 36px;
}

6、未知的HTML标签

<!-- 既不import，也不使用 -->
<registry-dialog/>

二、语法

// 变量已分配给自己
this.step = this.step > 3 ? (this.step = 3) : (this.step = this.step);

// ？
<el-card class="main_content" style="125px">
<div style="height: 260px; width: "></div>
<img style="margin-bottom;: 2px" class="miniIcon" src="@/assets/img/add_2x.png" />