用vue3写一个带背景的页面

以下是一个简单的用Vue3写的带背景的页面：

<template>
  <div class="bg">
    <h1>Hello, Vue 3!</h1>
    <p>This is a simple page with a background.</p>
  </div>
</template>

<script>
export default {
  name: "PageWithBackground",
};
</script>

<style scoped>
.bg {
  background-image: url("https://picsum.photos/1920/1080");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
  text-shadow: 2px 2px 4px black;
}
</style>

在上面的代码中，我们使用了一个`<div>`标签作为页面容器，并为其添加了一个`bg`的CSS类，用于设置背景图片和其他样式。在`<style>`标签中，我们使用了`scoped`属性，以确保样式只适用于当前组件。

在`<script>`标签中，我们导出了一个名为`PageWithBackground`的组件，用于在其他地方引用。该组件不需要任何数据或方法，因此我们没有添加任何内容。

最后，在`<template>`标签中，我们添加了一些简单的HTML内容，包括一个标题和一段文本。由于我们已经在CSS中设置了背景图片和样式，因此页面将自动具有背景效果。