vue3使用ElementPlus布局容器Container不生效

实现的最终效果站点, JeecgFlow

案例代码

<template>
  <div class="app_container">
    <el-container>
        <el-header class="header">Header</el-header>
        <el-main class="main">Main</el-main>
        <el-footer class="footer">Footer</el-footer>
    </el-container>
  </div>

</template>


<script setup lang="ts">
import { watch, ref, onMounted, toRef,reactive } from 'vue';

</script>


<style scoped >
.app_container{
    padding: 0;
    margin: 0;
    height: 100vh;
}
.el-container{
    padding: 0;
    margin: 0;
    height: 100vh;
}

/* 背景颜色 */
.header{
    width: 100vw;
   background-color: aqua;
}

.main{
    width: 100vw;
    background-color: forestgreen;
}
.footer{
    width: 100vw;
    height: 64px;
    background-color: pink;
}


</style>

以上代码从ElementUI-Plus代码示例。 但是显示内容是居中显示。 经排查发现main.ts中引入了一个默认的style.css样式文件。 将其删除即可正常显示。

import { createApp } from 'vue'
//将style.css去掉。就可以正常显示啦。
// import './style.css'
import App from './App.vue'
import router from '@/router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'



createApp(App).use(router).use(Antd).use(ElementPlus,{ locale }).mount('#app')