P2-VUE3-初次使用Element组件库-Layout和Container布局

1.概述

Element是一个快速布局组件库，我们可以使用它提供的组件库快速构建项目布局和各个组件样式。无需重复造轮子，就像搭积木一样搭建一个项目。

2.Element组件

Element组件官网：https://element.eleme.cn/#/zh-CN/component/installation

2.1.安装Element组件

第一步需要我们在项目中安装Element组件库，才能使用它提供的组件。

# 1.进入到项目根路径
cd .\base-learn\# 2.执行安装命令
- 使用yarn包管理器安装，如果是npm包安装可以查看官网安装介绍
- -S表示开发和生产环境都使用yarn add element-ui -S

2.2.引用Element

• 在Element官网复制Element模块
  
• 在项目的main.js中导入Element模块

2.3.创建vue组件使用Element

• 在view下创建element文件夹存放组件
• 在element文件夹下新建Layout组件
  

2.4.配置Layout组件路由

• router下index.js文件配置layout组件路由

import Vue from 'vue'
import VueRouter from 'vue-router'// 挂载router到vue实例
Vue.use(VueRouter)// 导入组件模块
const Layout = () => import('../views/element/Layout')const routes = [{path: '/',redirect: 'layout'},{path: '/layout',component: Layout}
]const router = new VueRouter({routes
})export default router

2.5.查看Layout组件路由

3.布局

Element组件库提供了两种类型的布局方式Layout和Container，我们介绍两种布局如何使用。

• Layout和Container区别

• Container布局是整个网页的布局方式包含页面的头部Header、主体Main、底部Footer
• Layout布局是在Container三大块中的布局，也就是头部Header、主体Main、底部Footer三大块里面具体布局方式

3.1.Layout布局

它是通过基础的 24 分栏，迅速简便地创建布局。我们可以根据实际布局需要的栏数来设置，例如需要4栏，那么每栏就占6栏出来的就是4栏布局样式。
Layout更多布局方式可以查看官网介绍，这里做一个抛砖引玉介绍如何使用官网例子的方法

• Layout.vue实现4栏布局

<template><div><h2>Layout4等分布局</h2><!-- gutter 属性来指定每一栏之间的间隔，默认间隔为 0。 --><el-row :gutter="20"><!-- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局 --><el-col :span="6"><div class="content">1</div></el-col><el-col :span="6"><div class="content">2</div></el-col><el-col :span="6"><div class="content">3</div></el-col><el-col :span="6"><div class="content">4</div></el-col></el-row></div>
</template><script>
export default {};
</script><style  scoped>.content {background-color: #555;color: #fff;}
</style>

• 4栏布局效果
  

3.2.Container 布局容器

• 复制Container 提供的布局代码
  
  
• 应用到项目中
  
• Layout.vue组件代码

<template><div><h2>Layout4等分布局</h2><!-- gutter 属性来指定每一栏之间的间隔，默认间隔为 0。 --><el-row :gutter="20"><!-- 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局 --><el-col :span="6"><div class="content">1</div></el-col><el-col :span="6"><div class="content">2</div></el-col><el-col :span="6"><div class="content">3</div></el-col><el-col :span="6"><div class="content">4</div></el-col></el-row><!-- Container布局 --><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div>
</template><script>
export default {};
</script><style  scoped>
/* Layout布局样式 */
.content {background-color: #555;color: #fff;
}/* Container布局样式 */
.el-header,
.el-footer {background-color: #b3c0d1;color: #333;text-align: center;line-height: 60px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;line-height: 160px;
}
</style>

• Container 布局效果