创建Menu.vue文件，通过Element-plus导入菜单框架，增删属性

局部引入菜单栏中所有选项的图标
将Menu.vue引入到Index.vue中
放在侧边栏aside中
注释掉侧边栏aside测试用背景色

order-system/src/layout/Index.vue

@@ -1,7 +1,10 @@
 <!-- 在layout文件夹下导入首页框架 -->
 <template>
   <el-container class="layout">
-    <el-aside width="200px" class="aside">Aside</el-aside>
+    <!-- 在aside侧边栏中使用菜单 -->
+    <el-aside width="200px" class="aside">
+      <Menu></Menu>
+    </el-aside>
     <el-container>
       <el-header class="header">Header</el-header>
       <el-main class="main">Main</el-main>
@@ -10,7 +13,8 @@
 </template>
 
 <script setup lang="ts">
-
+  // 引入菜单
+  import Menu from './Menu.vue'
 </script>
 
 <style scoped lang="scss">
@@ -19,9 +23,9 @@
 
   }
 
-  .aside {
-    background-color: blueviolet;
-  }
+  // .aside {
+  //   background-color: blueviolet;
+  // }
 
   .header {
     background-color: chocolate;

order-system/src/layout/Menu.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-menu
+    default-active="2"
+    class="el-menu-vertical-demo"
+
+  >
+  <!-- 注释掉暂时不需要的多余属性 -->
+    <!-- <el-sub-menu index="1">
+      <template #title>
+        <el-icon><location /></el-icon>
+        <span>Navigator One</span>
+      </template>
+      <el-menu-item-group>
+        <template #title><span>Group One</span></template>
+        <el-menu-item index="1-1">item one</el-menu-item>
+        <el-menu-item index="1-2">item two</el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="Group Two">
+        <el-menu-item index="1-3">item three</el-menu-item>
+      </el-menu-item-group>
+      <el-sub-menu index="1-4">
+        <template #title><span>item four</span></template>
+        <el-menu-item index="1-4-1">item one</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="2">
+      <el-icon><icon-menu /></el-icon>
+      <template #title>Navigator Two</template>
+    </el-menu-item>
+    <el-menu-item index="3" disabled>
+      <el-icon><document /></el-icon>
+      <template #title>Navigator Three</template>
+    </el-menu-item> -->
+
+    <!-- 添加菜单栏选项 -->
+    <el-menu-item index="1">
+      <el-icon><Menu /></el-icon>
+      <template #title>用户管理</template>
+    </el-menu-item>
+    <el-menu-item index="2">
+      <el-icon><Menu /></el-icon>
+      <template #title>菜品分类</template>
+    </el-menu-item>
+    <el-menu-item index="3">
+      <el-icon><Memo /></el-icon>
+      <template #title>菜品管理</template>
+    </el-menu-item>
+    <el-menu-item index="4">
+      <el-icon><Monitor /></el-icon>
+      <template #title>订单管理</template>
+    </el-menu-item>
+    <el-menu-item index="5">
+      <el-icon><Calendar /></el-icon>
+      <template #title>广告管理</template>
+    </el-menu-item>
+    <el-menu-item index="6">
+      <el-icon><Edit /></el-icon>
+      <template #title>评论管理</template>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+  // 引入菜单图标
+  // import { Menu } from '@element-plus/icons-vue' 
+
+  // 局部引入菜单栏中所有选项的图标
+  import { Menu, Memo, Monitor, Calendar,Edit } from '@element-plus/icons-vue' 
+</script>
+
+<style scoped>
+
+</style>