Vue布局秘籍：用这些技巧打造炫酷页面！

洛洛31

于 2024-01-16 14:12:34 发布

阅读量4.1k

点赞数 16

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_51160509/article/details/135617808

版权

本文详细介绍了ElementUI框架中el-container及其子组件el-header、el-aside和el-footer的用途、位置及在网页布局中的应用，包括单一布局、顶部导航+侧边栏、网格布局和多列布局示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件，有着以下关系：

- el-container：容器组件，是整个布局的最外层容器，包含了页面的整体布局。

- el-header：头部组件，位于容器组件的顶部，通常用于放置导航栏、logo等。

- el-aside：侧边栏组件，放置在容器组件的左侧或右侧，用于放置边栏菜单、快捷导航等。

组件之间的关系是嵌套关系，即el-container包含el-header、el-aside和el-footer。通过这些组件的组合使用，可以实现各种不同的网页布局。

<template>
  <el-container style="height: 500px;">
    <el-header>顶部导航栏</el-header>
    <el-main>Main 内容</el-main>
  </el-container>
</template>

如，可以将el-header放置在el-container的顶部，el-aside放置在左