vue 在 mounted 中 通过 js 修改html、body节点的样式，设置背景图片

在 mounted 中 通过 js 修改html、body节点的样式

this.$nextTick(() => {
  const bodyStyle = document.body.style, // 获取body节点样式
    htmlStyle = document.getElementsByTagName("html")[0].style, // 获取html节点样式
    docEl = document.documentElement,
    docBody = document.body,
    winWidth = docEl.clientWidth || docBody.clientWidth, // 获取浏览器的宽度
    WinHeight = docEl.clientHeight || docBody.clientHeight; // 获取浏览器的高度
  bodyStyle.background = "red"; // 重置body节点的背景颜色
  htmlStyle.background = "red"; // 重置html节点的背景颜色
});

在 vue 中设置背景图片

1、在 App.vue 中加入 body 样式，并修改默认样式（使背景图片四周不留空白）

#app,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

2、在需要背景图的页面里加入样式

#box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../assets/bg.jpg");
  background-size: 100% 100%;
}

3、在原有代码中的 div 外再套一层 div 并引入第二步的样式

<template>
  <div id="box">
    <div>主体代码</div>
  </div>
</template>