给Vue页面添加背景图片 以及one root element的问题

给Vue页面添加背景图片

从0上手的过程中遇到的问题，在这里记录一下。

解决方案参考【vue/css】如何给vue页面添加背景图片-vue cli3.

只改动了html和css两部分。

html部分

<!--两个div第一个装背景，一个装背景以外的东西-->

<div class="background">
      <img src="../assets/registerbackground.png" width="100%" height="100%" alt=""/>
</div>
    
<div class=“front”>
</div>

css部分

.background {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}

.front {
  z-index: 1;
  position: relative; /*调成absolute时没有居中而是靠左，所以我试了试改成relative了*/
}

遇到的问题

修改后发现页面报错了

解决方法参考Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

在最外层加一个div就可以了。