La solución de que la página no se puede abrir cuando Vue3 usa el contenedor de diseño del contenedor en elementUI Plus

Al usar la nueva versión de elementUI, puede aparecer una situación como esta:

 

 No se puede lograr el mismo efecto que el sitio web oficial:

 No hay problema con el código fuente, necesitamos configurar manualmente el estilo de html:

En cuanto a la unidad de altura vh, es mucho más fácil de usar que "altura: 100%", y también tiene un efecto de respuesta. A menudo lo uso en mi estilo habitual.

<template>
  <div class="app_container">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" class="aside">Aside</el-aside>
        <el-container>
          <el-header class="header">Header</el-header>
          <el-main class="main">Main</el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'app',
    setup(){
      
    },
  }
</script>

<style scoped>
  /* 手动配置全局样式 */
  html,
  body,
  .app_container,
  .el-container{
    padding: 0;
    margin: 0;
    height: 100vh;
  }
  /* 背景颜色 */
  .aside{
    background-color: pink;
  }
  .main{
    background-color: forestgreen;
  }
  .header{
    background-color: aqua;
  }
</style>

Para lograr el efecto global, y luego coloque sus propios componentes en la interfaz de usuario correspondiente para completar rápidamente el diseño de la página web

Siéntete libre de enviarme un mensaje privado con cualquier pregunta!

¡Espero compartir contigo! !