基于vue解决 100vw 和 100vh出现滚动条的问题

width：100vw和height:100vh出现滚动条的原因在于

% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
window.innerWidth = 视口宽度 = 100vw // 打印1280
this.$refs.main.clientWidth = 父视图宽度(body宽度) = 100% // 打印1263
所以视口宽度其实是包含了滚动条的宽度

解决办法：

html,body,#app{

    margin: 0;

    padding: 0;

    height: 100%;

}

设置全局样式表并在main.js中引入 

import "./assets/css/common.css";

 

注意：vue开发移动端不会出现此问题