vue3.0中写侧边栏的时候需要往里面配置icon

比如这样:

在vue3中 引用饿了么的icon需要单独下载引入 并不像vue2全部一起会下载

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

详见官网示例: el-Icon

页面中使用时： //----------------------引入需要的icon图标

import { Document,  Microphone,  VideoCameraFilled} from '@element-plus/icons-vue'

html中：

      <!-- 一级菜单  treeList-->
    <el-menu :default-active="meunActive" class="elMenu"  :unique-opened="true" ref="elMenu">
      <div v-for="(item, index) in menuList" :key="index">
        <!-- <pre>{{item.icon}}</pre> -->
        <el-menu-item :index="item.id" v-if="item.Subclass.length == 0">
          <template #title>
            <el-icon>
                <component :is="item.icon.name"></component>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>
          <component :is="item.icon"></component>
        </el-menu-item>

        <!-- 二级菜单 -->
        <el-sub-menu v-else :index="item.id">
          <template #title>
            <el-icon>
              <component :is="item.icon.name"></component>
            </el-icon>
            <span>{{ item.title }}</span>
          </template>
          <div v-for="(itemClass, itemIndex) in item.Subclass" :key="itemIndex">
            <el-menu-item :index="itemClass.id">{{ itemClass.title }}</el-menu-item>
          </div>
        </el-sub-menu>
      </div>
    </el-menu>

js中：

export default {
  components: {
    Document,
    Microphone,
    VideoCameraFilled
  },
  setup(){
      //模拟后端返回数据
      setTimeout(()=>{
          let menuData=[              {                    id: '1',                    icon: Document,                    title: '菜单noe',                    router: '',                    Subclass: []
              },
               {
                    id: '2',
                    icon: Microphone,
                    title: '菜单noe',
                    router: '',
                    Subclass: []
              },
              {
                    id: '3',
                    icon: Document,
                    title: '菜单two',
                    router: '',
                    Subclass: [
                      {
                        id: '3-1',
                        title: '菜单two-one',
                        router: '',
                      },
                  ]
              }
          ]
          //这里的state.menuList是我外面定义渲染菜单的数组
          //state.menuList = JSON.parse(JSON.stringify(menuData));
      },500)
      
      
  }
}

一个小问题：