前面完成了 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>
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/resize,h_160,m_lfit)
