乐趣区

关于vue-cli:解决在elementui中使用Container-布局容器时出现白边问题

环境架构

vue2 + vue-cli + element-ui 构建

问题背景

在应用 element-ui 的 Container 布局容器编写基于 vue-cli 环境下的前端页面时发现在浏览器周围别离有白边生成
如图

问题剖析

受【简书】解决 vue element-ui body 页面默认边距 - @web28 的启发,应用 f12 关上控制台察看其初始 style,发现 body 中具备 8px 的外边距款式

须要留神的是 察看控制台中的 8px 款式是加在 bady 中的,故若打消白边只能将 body 中的 margin0px,而无奈通过设置 <template> 下的根元素 style 打消

问题解决

依据控制台中的展现,只有在 body 中增加 margin: 0px 款式即可解决白边问题

代码:

<template>
  <div id="app" >
    1111111
  </div>
</template>

<script>

export default {name: 'App',}
</script>

<style>
  body{margin: 0px;}
#app {background-color: red;}
</style>

效果图:

问题思考

本来认为白边是 element-ui 生成的,然而应用 npm uninstall elementui 装配掉 element 后仍然存在该 style,初步判断是 vue 生成的,然而生成起因不详,如果有大佬晓得其中一二,欢送评论

参考资料

【简书】解决 vue element-ui body 页面默认边距 - @web28 https://www.jianshu.com/p/877a4a24dd6c

退出移动版