凸然

nuxt工程中如何去掉默认的白边

我们知道vue工程和基于vue的工程默认body会有个8px的padding,这就导致在有些情况下界面看上去丑。

vue工程中去掉默认的白边比较容易，直接修改/public/index.html 的body样式即可

<body style="padding: 0px;
  margin: 0px;
  ">
    <noscript>
    </noscript>
    <div id="app"></div>
</body>

但基于vuew工程的nuxt工程如何修改呢，它里头没有index.html这个文件。

百度了很久也没找到答案，然后换成了谷歌，果然搜出一篇相关的日文博客，虽然看不懂日文，但里头的代码还是看的懂的

很快就看到一个关键字——bodyAttrs. 查了下相关资料，原来是Vue Meta 的一个配置属性。

大致弄懂了其中原理后，然后将博客中的几个关键代码提取出来,果然可以。不得不说谷歌还是好用。
代码如下:

先在nuxt.config.js中添加如下配置

export default {
  head: {
     bodyAttrs: {
      class: 'body-class'
    },
  }
}

然后在vue页面中添加如下样式即可:

<style lang='stylus'>
.body-class {
  height: 100%;
  margin:0;
  padding: 0;
}
</style>




版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt工程中如何去掉默认的白边