布局模板(ant)

<template>
  <div>
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
      <a-layout-sider v-model="collapsed" collapsible>
        <div class="logo" />
        <菜单 />
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0"
          ><头部
        /></a-layout-header>
        <a-layout-content style="margin: 0 16px">
          <router-view />// 内容
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          底部/>
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
// import Header from "./Header";
// import SiderMenu from "./SiderMenu";
// import Footer from "./Footer";
export default {
  data() {
    return {
      collapsed: false // 控制左侧菜单缩放 注释并不能移除该功能且会报错
// <a-layout-sider :trigger='null' 时隐藏
    };
  },
  components: { Header, Footer, SiderMenu }
};
</script>

<style></style>