:::
12. 使用 Element plus 
12-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> - 利用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>
