Kubernetes 项目整体布局 el-container | Container 布局容器

（第二个container里面header main footer里面是垂直排列的，这些在container里面垂直排列，但是aside和这些又是水平排列）唯一不同的就是main里面的内容是不同的，边框架子都是相同的。其实框架是不怎么变化的，变化的是main里面。如果将平台名设置为固钉，它会盖在侧边栏上面，往上滚动的时候会一直存在。其实和el-form类似，一个组件其实是由很多的标签组成的。ele

富士康质检员张全蛋

1375人浏览 · 2024-03-18 15:33:14

富士康质检员张全蛋 · 2024-03-18 15:33:14 发布

当去新增一个页面的时候，先要去添加这个路由，这个index.js是专门用来配置路由的。路由配置好了去增加文件。就在这个文件里面去写样式和动作。

这个页面里面有html css js这些，element底层组件也是这些去实现的。其实就是去做了一个包装而已。

打开页面首先会去找App.vue，vue实例会挂载在APP.vue上面。并且会将APP.vue作为主页面。在路由的时候进入哪个path，它会自动找path下面的vue页面。其实就是去找路由，然后去找到路由对应的页面。

整体布局

你可能会去敲不同的项目，有很多种平台。那么其实都是可以复用的。唯一不同的就是main里面的内容是不同的，边框架子都是相同的。其实框架是不怎么变化的，变化的是main里面。

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外 <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的父元素必须是一个 <el-container>

src/layout/Layout.vue

这里需要新增一个页面Layout.vue,

import Layout from '@/layout/Layout.vue'

const routes = [
    {
        path: '/test',
        component: () =>import('@/views/test/Test.vue'),
        meta: {title: "测试页"}
    },
    {
        path: '/login',
        component: () =>import('@/views/login/Login.vue'),
        meta: {title: "测试页"}
    },
    {
        path: '/layout',
        //layout是公用的，所有的都使用这个整体布局
        component: Layout,
        meta: {title: "整体布局"}
    },
]

css 100vh 100vw

在CSS中，100vh 和 100vw 是两个非常有用的单位，它们分别代表视口（viewport）的高度和宽度。

100vh

含义：vh 是“viewport height”的缩写，代表视口高度的1%。因此，100vh 正好等于视口的高度。
使用场景：当你想要一个元素（如全屏背景图、全屏布局等）填满整个浏览器窗口的高度时，可以使用 100vh。

.full-height {
  height: 100vh;
}

100vw
含义：vw 是“viewport width”的缩写，代表视口宽度的1%。因此，100vw 正好等于视口的宽度。

使用场景：当你想要一个元素（如响应式布局、全宽背景等）填满整个浏览器窗口的宽度时，可以使用 100vw。

.full-width {
  width: 100vw;
}

结合使用
有时候，你可能想要一个元素同时填满整个视口的宽度和高度，这时可以将 100vw 和 100vh 结合使用。例如，创建一个全屏的背景图或全屏的容器：

.fullscreen {
  width: 100vw;
  height: 100vh;
  background: url('path/to/your/image.jpg') no-repeat center center;
  background-size: cover; /* 或者使用 contain 根据需要调整 */
}

布局容器 [el-container]

Container 布局容器 | Element Plus

el-container它是用来做整体布局的，用于布局的容器组件，方便快速搭建页面的基本结构。

常用标签：

其实和el-form类似，一个组件其实是由很多的标签组成的。和原生的html类似，比如select里面有很多option。

<template>
    <div>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

修改一下，整体的栏位置就变得非常清楚了。如果去掉第二个el-container，那么就全部变为了水平排列。（第二个container里面header main footer里面是垂直排列的，这些在container里面垂直排列，但是aside和el-container又是水平排列）（其实也就是flex布局）

使用整体布局肯定是要占满整个屏幕，如果在el-container里面设置height是无效的。因为还要在它的外面设置为100%。如果只在el-container里面设置那么就是要继承外面的div的，但是如果div都没有设置，那么就是不行的。

<div style="height:100%"> <div style="height:100vh"> 都行

<template>
    <div style="height:100vh;width:100vw">
        <el-container style="height:100%;width:100%">
            <!--侧边栏，需要定义宽度-->
            <el-aside class="aside" width="220px" style="background-color:coral">Aside</el-aside>
            <el-container>
            <!--垂直排列就需要在container里面，外层加一个container-->
                <el-header  style="background-color:green">Header</el-header>
                <el-main  style="background-color:royalblue">Main</el-main>
                <el-footer  style="background-color:yellow">Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>