Vue3项目中去除默认页边距（设置全局样式）

问题提出

我想用一张背景图占满整个页面（代码如下），但是渲染出来的图片无论如何都和页面边缘有一个边距，图片无法真正占满整个屏幕

<script setup lang="ts">
import { RouterLink} from 'vue-router'

</script>

<template>
<div class="full-screen-bg">

</div>
</template>

<style scoped>
.full-screen-bg {
    background-image: url('./assets/OKR背景图.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}
</style>

我学着原生项目的开发思路，加入如下代码，但是边距还是存在，把 * 换成body，结果也是如此

*{
    margin:0;
    padding:0;
}

解决方法

1、在assets文件夹下新增一个global.css文件夹，用来存放全局样式

2、在global.css中写入如下代码

body{margin:0;}

 3、在main.ts中导入global.css

再次运行代码，图片就能占满整个页面了