方法1:通过CSS全局样式
-
在全局CSS文件中设置:
如果你的项目中有全局的CSS文件(如App.vue
或专门的CSS文件),你可以直接设置body
或html
标签的背景颜色。在
src/assets
文件夹中(或者任何你存放CSS文件的地方),打开或创建一个CSS文件,例如global.css
,然后添加以下样式:body, html { background-color: white; }
-
在
main.js
或main.ts
中引入这个CSS文件:
确保在项目的入口文件(通常是main.js
或main.ts
)中导入你的全局CSS文件。import './assets/global.css';
方法2:在Vue组件中设置
如果你想在特定的Vue组件中设置背景色,可以直接在该组件的<style>
标签中设置:
<template>
<div class="app-container">
<!-- 组件内容 -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.app-container {
background-color: white; /* 设置白色背景 */
min-height: 100vh; /* 确保背景覆盖整个视口高度 */
}
</style>
这种方法的好处是可以针对不同的组件设置不同的背景色。