前面完成了 Elment-plus 的集成,现在就可以进行项目的开发了,首先本项目是在一整个视口宽高下的
可以看到,这并没有占满屏幕的整个高度,他是默认根据内容来撑起来的
修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<style>
html, body , #app {
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
app.vue
<script setup lang="ts"></script>
<template>
<div class="app">
<router-view></router-view>
</div>
</template>
<style scoped>
.app {
height: 100%;
background-color: red;
}
</style>
但是不推荐这样来写
可以使用视口单位来处理,视口单位不会去考虑当前盒子的父盒子,只是相对于其所处的当前视口而言的
<script setup lang="ts"></script>
<template>
<div class="app">
<router-view></router-view>
</div>
</template>
<style scoped>
.app {
height: 100vh;
width: 100vw;
background-color: red;
}
</style>