需要实现一个登录界面，login.vue的代码如下：

<script>
import { ref } from 'vue';

export default {
    setup() {

        return {

        };
    },
};
</script>

<template>
    <div id="login-container" class="login-container">

        <div id="container-left" class="container-left">

        </div>
        <div id="container-right" class="container-right">

        </div>

    </div>
</template>

<style scoped>
.login-container {
    display: flex;
    flex-direction: row;
    background: url('../assets/loginBk.jpg') no-repeat center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
}

.container-left {
    flex: 2;
    height: 100%;
    width: 100%;
}

.container-right {
    flex: 1;
    height: 100%;
    width: 100%;
}
</style>

        可以看到已经把背景图的宽高分别设置为100vw和100vh了(占满整个可视窗口)，但实际运行时发现图片和窗口之间留一定间隙且出现了滚动条：

        于是去看一下检查页面，发现body标签的margin设置为了8px：

         想来应该是index.html中的body标签有默认的margin间隙，于是手动讲margin设置为0：

        改好后发现问题解决了：