这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 的视频再自己动手进行实践的

Element plus 提供了很多页面的布局，Element plus 为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。其中主要包含5中标签，并使用它们来构造页面布局。

<el-container>：是所有容器的外层容器，此标签也可以互相嵌套构成更多布局。并且当子元素中包含<el-header>或<el-footer>时，内部子元素会垂直排列。针对其他元素，则会水平排列。
<el-header>：顶部栏容器。
<el-aside>：侧边栏容器。
<el-main>：内容区域容器。
<el-footer>：底部栏容器。

使用Element plus提供的布局

首先新建项目的主页Vue，并在其中嵌套入自己想要的布局方式即可，下面是我尝试使用的布局

<template>
    <el-container>
        <el-header>
            <h3>I am Header </h3>
        </el-header>
        <el-container>
            <el-aside>
                <h3>I am aside</h3>
            </el-aside>
            <el-container>
                <el-main>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id repellat vel est cum perspiciatis iste maxime veritatis placeat ea ratione officiis cumque rem molestias debitis in quod beatae ipsum mollitia consequuntur, voluptatibus enim! Rerum molestias eveniet animi, eius ea facere velit blanditiis sapiente cupiditate expedita quis, eligendi porro sequi perspiciatis omnis modi obcaecati hic sint voluptatum. Reiciendis distinctio perspiciatis maxime temporibus quasi libero dolore minus? Ipsum in reprehenderit consequuntur magni, quo nisi ratione voluptate pariatur! Accusantium corrupti eaque fugiat labore inventore est quod id, in exercitationem consequuntur, ipsam aliquam, odit nobis non commodi odio itaque voluptatum hic ipsum? Incidunt, maiores!
                </el-main>
                <el-footer>
                    <h3>I am footer</h3>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<style scoped>
.el-header{
    background-color: yellow;
}
.el-aside{
    background-color: green;
}
.el-main{
    background-color: white;
}
.el-footer{
    background-color: gray;
}
</style>

呈现的效果如图所示

 这样就能完成布局，后续我们可以通过自写的组件嵌套进相应的模块中，并使用vue的vue-router模块实现路由配置，实现项目的组件化