【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高

一小池勺

于 2024-03-18 18:37:24 发布

阅读量374

点赞数 11

文章标签： vue3 vss3 ts vite

本文链接：https://blog.csdn.net/zrblue/article/details/136817288

版权

前面完成了 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>

一小池勺

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高

前面完成了 Elment-plus 的集成，现在就可以进行项目的开发了，首先本项目是在一整个视口宽高下的。可以使用视口单位来处理，视口单位不会去考虑当前盒子的父盒子，只是相对于其所处的当前视口而言的。可以看到，这并没有占满屏幕的整个高度，他是默认根据内容来撑起来的。修改 index.html。
复制链接

扫一扫