vue部署左右菜单

https://blog.csdn.net/weixin_39237340/article/details/121800763?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-1-121800763-blog-121666311.pc_relevant_multi_platform_whitelistv2&spm=1001.2101.3001.4242.2&utm_relevant_index=4

1安装LESS

npm install --save-dev less-loader less --save

 

https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88

在这个网站可以看到所有的element-ico

2:代码

<template>

 <el-container class="home_container">

    <!-- 头部区域 -->

    <el-header>

      <div>

        <!-- <img src="../assets/heima.png" alt="" /> -->

        <span>信贷后台管理系统</span>

      </div>

      <el-button type="info" @click="logout">退出</el-button>

    </el-header>

    <!-- 页面主体区域 -->

    <el-container>

      <!-- 侧边栏 -->

      <el-aside width="200px" :style="{ 'height':fullHeight}">

        <!-- 侧边栏菜单区域 -->

        <el-menu active-text-color="#409Eff"

        background-color="#545c64"

        text-color="#fff" unique-opened>

        <!-- 一级菜单 -->

        <el-sub-menu :index="item.id+''" v-for="item in menulist" :key="item.id">

          <!-- 一级菜单模板区域 -->

          <template #title>

            <el-icon :class="iconsObj[item.id]"></el-icon>

            <span>{{item.authName}}</span>

          </template>

          <!-- 二级菜单 -->

          <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">

          <template #title>

            <el-icon><iconMenu /></el-icon>

            <span>{{subItem.authName}}</span>

          </template>

          </el-menu-item>

        </el-sub-menu>

      </el-menu>

      </el-aside>

      <!-- 右侧内容主体区域 -->

      <el-main>Main</el-main>

    </el-container>

  </el-container>

</template>

<script >

export default {

  name:"InDex",

  data () {

    return {

      //获取电脑屏幕高度

       fullHeight: document.documentElement.clientHeight+"px",

      // 左侧菜单数据对象

      menulist: [],

      // 字体图标对象

      iconsObj: {

        125: 'iconfont icon-users',

        103: 'iconfont icon-tijikongjian',

        101: 'iconfont icon-shangpin',

        102: 'iconfont icon-danju',

        145: 'iconfont icon-baobiao'

      }

    }

  },

  created () {

    this.getMenuList()

  },

  methods: {

    logout () {

      window.sessionStorage.clear()

      this.$router.push('/login')

    },

    // 获取所有的菜单数据

   getMenuList () {

      var data=[

        {id:100,authName:"菜单第一个",children:[

          {id:501,authName:"32级菜单"}, {id:502,authName:"31级菜单"}, {id:503,authName:"33级菜单"}

        ]},

         {id:200,authName:"菜单第二个",children:[

          {id:601,authName:"32级菜单"}, {id:602,authName:"31级菜单"}, {id:603,authName:"33级菜单"}

        ]}

      ]

      this.menulist = data

    }

  }

}

</script>

<style lang="less" scoped>

.home_container {

  height: 100%;

}

.el-header {

  background-color: #363d40;

  // 给头部设置一下弹性布局

  display: flex;

  // 让它贴标左右对齐

  justify-content: space-between;

  // 清空图片左侧padding

  padding-left: 0;

  // 按钮居中

  align-items: center;

  // 文本颜色

  color: #fff;

  // 设置文本字体大小

  font-size: 20px;

  // 嵌套

  > div {

    // 弹性布局

    display: flex;

    // 纵向上居中对齐

    align-items: center;

    // 给文本和图片添加间距，使用类选择器

    span {

      margin-left: 15px;

    }

  }

}

.el-aside {

  background-color: #313743;

  .el-menu {

    border-right: none;

  }

}

.el-main {

  background-color: #e9edf1;

}

.iconfont{

  margin-right: 10px;

}

</style>