vue-admin-template 中layout布局

Vue-Admin-Template是一个基于Vue.js和Element UI的后台管理系统模板，提供了丰富的UI组件和功能模块，适用于各种类型的后台管理系统。

在Vue-Admin-Template中，整个页面布局是由一个Layout组件来实现的，包括头部导航栏、侧边栏、面包屑导航和主要内容区域。Layout组件的代码在/src/layout目录下，其中包括Header、Sidebar、TagsView、AppMain等多个子组件。

下面是Layout组件的代码示例：

<template>
  <div class="app-wrapper">
    <Sidebar />
    <div class="main-container">
      <Header />
      <TagsView />
      <AppMain />
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar'
import Header from './components/Header'
import TagsView from './components/TagsView'
import AppMain from './components/AppMain'

export default {
  name: 'Layout',
  components: {
    Sidebar,
    Header,
    TagsView,
    AppMain
  }
}
</script>

<style>
.app-wrapper {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>

在这个示例中，Layout组件分为两个部分，第一部分是侧边栏组件Sidebar，第二部分是头部导航栏、面包屑导航、主要内容区域等组件的容器。容器使用了Flex布局，其中TagsView和AppMain组件的高度都设置为flex: 1，以充满剩余的空间。

您可以根据自己的需求修改Layout组件的代码，例如添加自定义的组件、修改样式等。同时，Vue-Admin-Template也提供了丰富的UI组件和功能模块，可以方便地实现各种类型的后台管理系统。