整体布局
你可能会去敲不同的项目,有很多种平台。那么其实都是可以复用的。唯一不同的就是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,
const routes = [
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: "整体布局"}
},
]
布局容器 [el-container]
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布局)
<template>
<div>
<el-container style="height:100vh;width:100vw">
<!--侧边栏,需要定义宽度-->
<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>
element-plus已经帮我们提供了整体布局的架子,剩下的就是嵌入合适的element元素即可。