vue2elementui封装左边导航

你可以通过以下步骤使用 Vue2 + ElementUI 封装左侧导航：

1. 安装 ElementUI

使用 npm 命令行工具执行以下命令安装 ElementUI：

npm install element-ui --save

2. 创建组件

创建一个名为 `SideMenu.vue` 的组件，用于封装左侧导航。

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect">
    <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.path">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  props: {
    menuList: Array,
    activeIndex: String
  },
  methods: {
    handleMenuSelect(index) {
      this.$emit("menu-select", index);
    }
  }
};
</script>

<style>
/* 样式代码 */
</style>

在组件中，我们使用了 ElementUI 的 `<el-menu>` 和 `<el-menu-item>` 组件来渲染导航菜单。通过 `props` 属性，我们可以接收父组件传递过来的导航菜单数据和当前激活菜单项的索引。

当用户点击菜单项时，我们触发 `handleMenuSelect` 方法，并通过 `$emit` 方法向父组件传递当前菜单项的索引。

3. 在父组件中使用

在父组件中使用 `<SideMenu>` 组件，并传递导航菜单数据和当前激活菜单项的索引。

<template>
  <div>
    <SideMenu :menuList="menuList" :activeIndex="activeIndex" @menu-select="handleMenuSelect"></SideMenu>
    <router-view></router-view>
  </div>
</template>

<script>
import SideMenu from "./SideMenu.vue";

export default {
  name: "App",
  components: {
    SideMenu
  },
  data() {
    return {
      menuList: [
        {
          title: "首页",
          path: "/",
          icon: "el-icon-s-home"
        },
        {
          title: "用户列表",
          path: "/user",
          icon: "el-icon-user"
        },
        {
          title: "订单列表",
          path: "/order",
          icon: "el-icon-s-order"
        }
      ],
      activeIndex: "/"
    };
  },
  methods: {
    handleMenuSelect(index) {
      this.activeIndex = index;
      this.$router.push(index);
    }
  }
};
</script>

<style>
/* 样式代码 */
</style>

在父组件中，我们引入了 `<SideMenu>` 组件，并通过 `props` 属性传递导航菜单数据和当前激活菜单项的索引。我们还监听了 `<SideMenu>` 组件的 `menu-select` 事件，在事件处理函数中更新了当前激活菜单项的索引，并通过 `$router.push` 方法切换到对应的路由页面。

这样，我们就成功地封装了一个简单的左侧导航组件。