在 Vue 3 中全局设置页面背景图

在Vue 3中，可以通过全局样式设置整个页面的背景图。你可以在项目的全局CSS文件中定义背景图，或者通过Vue 3的全局样式功能来实现。以下是一个示例：

步骤 1: 在 src/assets 目录下添加背景图片

首先，将你想要设置为背景的图片添加到 src/assets 目录下。假设图片名为 background.jpg。

步骤 2: 在 src/assets 目录中创建 global.css

接下来，在 src/assets 目录中创建一个名为 global.css 的文件，并在其中定义全局样式。

/* src/assets/global.css */
body {
  margin: 0;
  padding: 0;
  background-image: url('./background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

步骤 3: 在 main.js 中引入全局样式

然后，在 main.js 文件中引入这个全局样式文件。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import './assets/global.css';  // 引入全局样式

createApp(App).mount('#app');

完整代码示例：

1. src/assets/global.css

body {
  margin: 0;
  padding: 0;
  background-image: url('./background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

2. src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import './assets/global.css';  // 引入全局样式

createApp(App).mount('#app');

这样设置之后，页面的背景图将会应用到整个应用的背景中。你可以根据需要调整 background-size、background-position 等CSS属性来更改背景图的显示效果。