vue后台管理系统学习(5)--主页面改造

vue后台管理系统学习(5)--主页面改造   教程  https://panjiachen.github.io/vue-element-admin-site/zh

https://blog.csdn.net/zx13525079024/article/details/101095601

今天我们看看主页面布局以及主页面有哪几部分组成，首先主页面的路径在src/layout/index 

主页面主要有侧边栏，面包屑，navbar ,选项卡，内容区域这几部分组成

 

代码如下

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </div>
  </div>
</template>
1.       <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> 

         表示是否关闭侧边栏的代码

2.    <sidebar class="sidebar-container" />

        代表侧边栏

3.   <navbar />  表示右上方的 navbar,  面包屑的功能也在这个组件内 

4.    <tags-view v-if="needTagsView" /> 表示打开的选项卡

5.    <app-main />  表示页面的主要内容区域

      页面布局基本就有这几部分组成，

  教程  https://panjiachen.github.io/vue-element-admin-site/zh