【前端vue】三、后台管理系统-页面布局_vue前端页面

给妹妹做毕设，顺便记录一波

分为三个部分：头部，左侧、主页面

准备工作：已经搭建好前端的环境，且成功运行了最基础的项目
参考https://editor.csdn.net/md/?articleId=136949632

参考element-ui组件：https://element.eleme.io/2.13/#/zh-CN/component/installation
Container 布局容器、NavMenu 导航菜单-侧栏

1、基本的框架

App.vue

<template>
  <div id="app">
    <el-container>
      <el-header style="background-color:#4c535a">
        <img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
        <span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>

      </el-header>
    </el-container>
    
    <el-container>
      <el-aside  style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">

      </el-aside>
      <el-main>
      
      </el-main>
    </el-container>
  
  </div>
</template>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.左侧导航 App.vue

<template>
  <div id="app">
    <el-container>
      <el-header style="background-color:#4c535a">
        <img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
        <span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>

      </el-header>
    </el-container>
    
    <el-container>
      <el-aside  style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">系统首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>信息管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">管理员信息</el-menu-item>
            <el-menu-item index="1-2">用户信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

      </el-aside>
      <el-main>
        
      
      </el-main>
    </el-container>
  
  </div>
</template>

<style>
.el-menu{
  border-right: none !important;
}

</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

3.主体部分App.vue
App.vue主要部分

<el-main>
        <router-view/>
      </el-main>
1
2
3

App.vue整体部分

<template>
  <div id="app">
    <el-container>
      <el-header style="background-color:#4c535a">
        <img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top:10px;">
        <span style="font-size:20px;maigin-left:15px;color:white">后台管理系统</span>

      </el-header>
    </el-container>
    
    <el-container>
      <el-aside  style="overflow:hidden;min-height:100vh;background-color:#545c64;width:250px">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">系统首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>信息管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">管理员信息</el-menu-item>
            <el-menu-item index="1-2">用户信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>

      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  
  </div>
</template>

<style>
.el-menu{
  border-right: none !important;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51