项目是用vue+webpack+elementUI 完成的。虽然没有什么深奥的技术和难点，但是有些细节还是值得注意的。
1、满足不同屏幕尺寸下缩放全屏显示。
单单只靠宽度、高度百分比是不可以实现的，比如
如果宽度设置百分比，当屏幕宽度比较小时，这个标题一行显示不下，很容易出现问题。
这里用zoom 可以实现。具体代码：
getSize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
},
onResize() {
this.getSize();
const defWidth = 1920;
const defHeight = 1080;
const wZoom = +(this.width / defWidth).toFixed(3);
const hZoom = +(this.height / defHeight).toFixed(3);
const same = Math.abs(wZoom - hZoom) <= 0.5;
if (same) {
let _zoom = wZoom < hZoom ? wZoom : hZoom;
if (_zoom > 1) _zoom = 1;
$('.divZoom').css({
zoom: _zoom
})
}
}
2、我们常常遇到这样的情况，标签绑定样式 ：div-style="divStyle", divStyle在data中定义，如果divStyle 中有背景图片怎么写呢？
divStyle: {
'background': `url(${ require('../link.png') }) no-repeat`,
'padding-left': '80px'
},
首先，${}是ES6提供的字符串拼接变量和表达式的新特性，其次用require 引入图片路径，不能直接写直接路径，否则打包后是无法找到的。
3、图表颜色渐变显示
设置itemStyle的color为new echarts.graphic.LinearGradient()线性渐变即可. 这个API在官方文档里面都没找到, 经过测试前四个参数设置为0, 0, 1, 0可以从左到右渐变. 设置为0,0,0,1可以从上到下渐变. 第5个参数数组表示开始的颜色和结束的颜色.,以下为三个颜色堆叠图的渐变设置，柱状图可以在itemStyle 中设置。
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.4,
color: this.colorRgb(this.options.color[i],1)
}, {
offset: 0.8,
color: this.colorRgb(this.options.color[i],0.6)
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
4、表格内容太长，超出显示...
这个问题很常见，每次都要去查，在这里算做个记录吧。
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
/* 注意： 自己写的table 要加： table-layout:fixed
5、使用el-table 最底部总是有一条白线。
遇到这种情况，将下列属性改为背景色即可
.el-table::before {
background-color: red;
}
6 伪元素的应用
可以实现元素激活状态前面有蓝色的边
.el {
position: relative;
padding-left: 25px;
height: 38px;
line-height: 38px;
&.is-active {
color: @color-primary;
&::before {
position: absolute;
3px;
background: @color-primary;
left: 0;
content: '';
height: 100%;
top: 1px;
}
}
}