Vue开发实例（05）之搭建项目主页面头部、导航、主体等页面布局

最新推荐文章于 2024-07-23 17:22:52 发布

编程界小明哥

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量2.3w

点赞数 44

分类专栏： Vue开发实例文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/122266292

版权

Vue开发实例专栏收录该内容

21 篇文章 299 订阅

订阅专栏

本文介绍了如何使用Vue和Element-ui搭建常见的管理系统的页面布局，包括Header、Aside、Main和Footer，并通过解决footer空白问题展示了全局CSS的使用。同时，创建了Header组件，利用flex布局实现了头部的分栏显示。最后，提供了下一节将在Header上添加更多功能的预告。

摘要由CSDN通过智能技术生成

作者简介

作者名：编程界明世隐
简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

概述

因为很多项目都是类似管理系统的界面，最上面是头部、左边是导航菜单、右边是主体页面、下方是Footer的框架结构，所以在学习过程中，我们也就按照这个方式来搭建，就比如下面这样的，今天就类似搭建一个这样的框架结构。

在这里插入图片描述

Container 布局容器介绍

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

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

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

创建布局

修改上节中的Index.vue代码如下：

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

<script>
export default {
  name: 'Index',
  props: {
    msg: String
  }
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>

查看页面效果：
在这里插入图片描述
有个问题，就是footer下方还有很大的空白

原因：布局器没有铺满

布局器铺满屏幕

创建全局css文件
在src–assets–css创建global.css 文件，代码如下：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    height: 100%;
}

这里主要是用到了：height: 100%;
其他的是为了把其他空格占位去除，为后面的代码做准备。

在main.js 中注册此全局的css文件

import ‘@/assets/css/global.css’;

圆满解决

创建Header页面

新建一个Header.vue，如果你的IDEA在新建的时候没有Vue，则表示你需要安装Vue的插件，很简单参考我之前的一篇文章《IDEA常用插件》，建议先下载好，再本地安装，然后重启IDEA就可以了。
编写代码 Header.vue
采用flex布局，讲头部分成左、中、右3个部分。

<template>
    <div style="display:flex;">
        <div style="width: 200px;">头部</div>
        <div style="flex:1"></div>
        <div style="width: 100px;">欢迎</div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>

</style>

修改Index.vue

使用 import Header from “./Header”;
在export中加入 components: {Header}
在template的el-header中使用 Header 组件

完整代码如下：

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

<script>
import Header from "./Header";

export default {
  name: 'Index',
  components:{Header},
  props: {
    msg: String
  }
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;

  }

  body > .el-container {
    margin-bottom: 40px;
  }
</style>