巧用Vue3+Element Plus，轻松搭建后台管理系统：从零到一，打造SideBar

前端

2023-02-27 20:26:24

SideBar助力Vue3+Element Plus后台管理系统开发

在开发后台管理系统时，搭建一个美观、功能齐全的侧边栏（SideBar）至关重要。它不仅提供便捷的导航，还能实现操作控制和权限管理等关键功能。而Vue3和Element Plus的强强联手，无疑为我们提供了打造理想SideBar的利器。

一、搭建Vue3+Element Plus SideBar组件

1. 项目初始化

创建Vue3和Element Plus项目，安装Element Plus并创建Sidebar.vue组件。

2. 构建组件

引入Element Plus组件并设置props，使用v-for循环动态渲染菜单项，添加点击事件处理函数。

3. 配置SideBar数据

创建menuData.js文件并手动填充菜单数据，包括名称、链接、图标等信息。

4. 集成SideBar组件

在App.vue中引入Sidebar组件，传递menuData作为props。

5. 完善SideBar功能

添加多级菜单、折叠/展开、激活状态、响应式布局等功能。

6. 美化SideBar

自定义主题、添加图标、调整配色方案等方式提升SideBar外观。

二、SideBar在后台管理系统中的作用

SideBar是后台管理系统的重要组成部分，承担着以下关键任务：

导航： 提供分层菜单结构，方便用户在不同页面之间切换。
操作： 整合常用操作按钮，如新增、编辑、删除等。
权限控制： 基于用户权限展示菜单项，限制未授权操作。

三、代码示例

<!-- Sidebar.vue -->
<template>
  <el-menu :default-active="activeMenu" @select="handleMenuSelect">
    <el-menu-item v-for="item in menuData" :key="item.id" :index="item.id">
      <el-icon :size="16" :name="item.icon"></el-icon>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ref } from 'vue';
import { ElMenu, ElMenuItem } from 'element-plus';

export default {
  components: { ElMenu, ElMenuItem },
  props: ['menuData'],
  setup() {
    const activeMenu = ref('1');

    const handleMenuSelect = (index) => {
      // 处理菜单点击事件
      console.log(index);
    };

    return {
      activeMenu,
      handleMenuSelect,
    };
  },
};
</script>

<!-- App.vue -->
<template>
  <div>
    <sidebar :menu-data="menuData" />
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue';
import menuData from './data/menuData.js';

export default {
  components: { Sidebar },
  data() {
    return {
      menuData,
    };
  },
};
</script>