vue3+ElementPlus后台管理搭建（二）

阿里icon 及侧边收缩

1.阿里图标添加

选择合适的阿里图标到我的项目

选择到项目后，点击font class 将下面的代码复制到public的index.html中，这里新添加图标后，这行css可能会变更，记得同步到项目中
选择合适的icon，复制代码即可使用

在项目中使用也很简单,如下即可

<i class='iconfont icon-sucaiku'></i>

例如我们在前面一节看到的 在路由管理里面的meta里面填的icon实际上就是这里的几个图标，具体渲染也见前面一节。

 <i class="iconfont" :class="item.meta.icon"></i>

2.侧边收缩

实际上在el-menu里面提供了一个属性，collapse,这个属性可以实现侧边的收缩，但是我们需要在其兄弟组件（header.vue）
里面实现对其控制，这里我们套用一下状态管理

• 首先是在el-menu里加上属性

  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="layout-menu system-scrollbar"
    text-color="#fff"
    :collapse="isCollapse"
    :default-active='activeMenu'
    router
  >
  .......
  </el-menu>

• 接着我们在store里面把collapse的状态折腾起来
  这里我们把后台的状态部门拆分出来 叫做app.js，新建在store–>modules–>app.js
  代码如下：

export de