【VUE项目实战】15、Home页面布局设计及框架搭建

接上篇《14、退出功能及优化EL按需导入、提交Git》
上一篇我们结束了登录模块的开发，本篇我们来正式进行Home主页面的开发，先来进行主页面的设计以及开发前的准备工作。

一、主页整体布局

我们首先看看需要开发的主页的页面：

整个主页分为三大块，最上面是横向的系统标题和操作设置区域，左侧是菜单区域，右侧是主体功能页面显示区域。
完成这样一个首页的布局，我们要用到Elemenet-UI中的下列组件：
：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

大致的页面布局效果：

代码：

  Header
  
    Aside
    Main
  

二、搭建布局主体框架

清楚了主页的整体布局之后，我们来实现页面整体布局框架。
找到之前的Home.vue，目前的效果只有这样：

首先将需要使用的组件导入到src/plugins/element.js中（Container, Header, Aside, Main）：

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.prototype.$message = Message

我们将上面官网提供的布局样例代码，复制到Home.vue文件中，稍作修改：

效果：

可以看到已经分出了上面、左边和右边的布局效果了，但是因为没有颜色看不太出来，我们需要使用取色器，拿到效果图上面的颜色，进行设置。
具体的取色过程就不说了，大家使用PS或者其他工具取图片颜色即可，获取到其rpg色值（十六进制），这里上面区域颜色是“#373d41”，左侧为“#333744”，右侧为“#eaedf1”，我们在页面代码中设置class样式(el组件的名称就是其class的类名，无需在标签上再次声明)，并设置background-color：

效果：

此时header、aside、main都有了背景颜色了。但是还有一个问题，目前的布局不是占满整个网页的，需要看看是什么原因导致主区域没有占满全屏：

这里我们看到实际上是最外层的section导致页面没有全屏的，实际最外层的section就是Home.vue中最外层的el-container，我们修改它的样式就能达到全屏的效果：

这里给最外层的el-container设置了一个名为“home-container”的样式，给该样式设置高度为100%：

.home-container{
    height: 100%;
}

我们回到Home页面查看效果：
到此，我们Home页的整体布局框架就搭建好了，后面我们针对三个区域分别进行详细的开发。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/120399641