About the Author

Author name: Programming Ming Ming Shiyin
Introduction: CSDN blog expert, has been engaged in software development for many years, proficient in Java, JavaScript, bloggers also learn and grow step by step from scratch, know the importance of learning and accumulation, like to play with the majority of ADCs Wild Upgrade, welcome your attention, and look forward to learning, growing, and taking off with you!

introduction

Vue is one of the most popular front-end frameworks. As a front-end developer, you should master it proficiently. If you plan to learn the development process of Vue, then come on, Brother Ming will take you to get started quickly and take you to fly!
Even if you are not a front-end developer, it is necessary to have a certain understanding of the front-end development process. No one is sure whether the company will let me do the front-end in the future. It does not take a lot of time to do some simple examples. It can improve your self-confidence and sense of accomplishment, so follow Brother Ming, there is nothing wrong, come on!

navigation

✪ General index of Vue development example directory ◄Previous [04] Change project entry ►Next [06] Vue3 registration Element-ui error resolution

overview

Because many projects are similar to the interface of the management system, the top is the header, the left is the navigation menu, the right is the main page, and the bottom is the frame structure of the Footer, so in the learning process, we will build it in this way, just For example, the following is like building a framework structure like this today.

insert image description here

Container layout container introduction

The container component used for layout is convenient for quickly building the basic structure of the page:

component name	describe
<el-container>	Outer container. When the sub-element contains <el-header> or <el-footer>, all sub-elements will be arranged vertically up and down, otherwise they will be arranged horizontally.
<el-header>	Top bar container.
<el-aside>	Sidebar container.
<el-main>	Main area container.
<el-footer>	Bottom bar container.

The above components adopt flex layout, please make sure the target browser is compatible before using. In addition, the child elements of <el-container> can only be the latter four, and the parent elements of the latter four can only be <el-container>.

create layout

Modify the Index.vue code in the previous section as follows:

<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>

Check the page effect:
insert image description here
there is a problem, that is, there is still a large blank space under the footer

Reason: The placer is not fully paved

Placer fills the screen

Create a global css file
Create a global.css file in src–assets–css, the code is as follows:

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

It is mainly used here: height: 100%;
the others are to remove other spaces and prepare for the following code.

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

Satisfactory solution

Create Header page

Create a new Header.vue. If your IDEA does not have Vue when you create it, it means that you need to install the Vue plug-in. It is very simple to refer to my previous article "IDEA Common Plug-ins" . It is recommended to download it first, and then install it locally. Then restart IDEA.
Write code Header.vue
adopts flex layout, and divides the head into three parts: left, middle and right.

<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>

Modify Index.vue

Use import Header from "./Header";

Add components to export: {Header}

Use the Header component in the el-header of the template

The complete code is as follows:

<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>

Running effect, the header page has been loaded
insert image description here

Let’s stop here this time, and implement some specific things on the Header in the next section.

summary

This section summarizes "Building the layout of the header, navigation, and main body of the main page of the project". I hope it can be helpful to everyone. Please help [Like] + [Favorite] + [Punch in the comment area ] , if you have If you are interested in learning Java with Brother Xiaoming, [Follow a wave] Don't get lost.
Please go to the bottom of the article to help [One-click three links] Thank you!