12-1 配置版面

1. 利用布局容器來配置版面（https://element-plus.gitee.io/#/zh-CN/component/container），例如（src\App.vue）：

   <template>
     <div>
       <el-container>
         <el-aside width="200px">Aside</el-aside>
         <el-container>
           <el-header><Header/></el-header>
           <el-main>
             <router-view></router-view>
           </el-main>
           <el-footer><Footer/></el-footer>
         </el-container>
       </el-container>
     </div>
   </template>

   Copy

    

2. 利用https://element-plus.gitee.io/#/zh-CN/component/menu來製作選單，例如（src\components\Header.vue）：

   <script>
   import { ref } from "vue";
   export default {
     setup() {
       const activeIndex = ref(1);
   
       const handleSelect = (key, keyPath) => {
         console.log(key, keyPath);
       };
       return { activeIndex, handleSelect };
     },
   };
   </script>
   
   <template>
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
       mode="horizontal"
       @select="handleSelect"
       background-color="#545c64"
       text-color="#fff"
       active-text-color="#ffd04b"
     >
       <el-menu-item index="1">回首頁</el-menu-item>
       <el-submenu index="2">
         <template #title>各種功能</template>
         <el-menu-item index="2-1">選項1</el-menu-item>
         <el-menu-item index="2-2">選項2</el-menu-item>
         <el-menu-item index="2-3">選項3</el-menu-item>
         <el-submenu index="2-4">
           <template #title>選項4</template>
           <el-menu-item index="2-4-1">選項1</el-menu-item>
           <el-menu-item index="2-4-2">選項2</el-menu-item>
           <el-menu-item index="2-4-3">選項3</el-menu-item>
         </el-submenu>
       </el-submenu>
       <el-menu-item
         index="3"
         disabled
       >消息中心</el-menu-item>
       <el-menu-item index="4"><a
           href="https://www.ele.me"
           target="_blank"
         >後臺管理</a></el-menu-item>
     </el-menu>
   </template>
   <style lang="scss" scoped>
   </style>

   Copy

    

3.