2.vue3+ts+element-plus后台管理界面布局及动态侧边栏实现

1. 界面布局

  利用element-plus的布局组件实现：  整个布局容器，  顶部布局容器，  侧边布局容器  主要布局容器。  采用组件化思想，将header和aside组件化，方便布局。

  color: var(--el-text-color-primary);
}

2.侧边栏布局及动态实现技术

侧边栏的布局，利用element-plus的el-menu组件实现。  el-menu组件实现第一级菜单，el-submenu实现第二级菜单。  el-menu-item实现菜单项，el-submenu-item实现二级菜单项。  el-menu-item-group实现菜单组，el-menu-item-group实现菜单组。

      所有菜单内容存储在数组menuData中，通过v-for指令动态渲染。通过noChildren过滤出没有子菜单的菜单数据也就是一级菜单数据。  通过hasChildren过滤出有子菜单的菜单数据也就是二级菜单数据。

  需要说明的是在vue3和elment-plus中: 

 1.el-menu-item和el-submenu-item组件的name属性值必须唯一，否则会报错。 

  index属性也必须唯一，否则后面现实菜单单击一项所有项全部响应。

 2.icon采用组件化设计，不同以前版本通过拼接字符串的方式调用组件（大多过去实现采用这种方法）。具体为：

   

   这块实现参考文章：https://blog.csdn.net/qq_40190624/article/details/125019530 说的较为详细。

ai推荐使用：

   需要自定义的图标，可以到iconfont官网下载，然后放到static文件夹下，然后通过import引入。https://blog.csdn.net/qq_39246667/article/details/124347398 给出具体方法较为复杂.

  3.noChildren()方法最好存储成具体的变量，这样在代码中可以很方便的调用，而不用在v-for中直接调用函数。

注意：index 项目必须唯一 :index="item.label"  item.label选项各菜单都有且不同，子菜单项标题没有name,所以item.name报错。