Vue Element Admin 后台管理系统侧边栏导航实战

前端

2023-09-02 00:14:03

在 Vue 生态中，Element UI 是一个流行的前端 UI 框架，提供了一系列强大的组件和工具来构建用户界面。本文将指导你使用 Element UI 构建一个功能齐全的后台管理系统侧边栏导航栏，让你能够轻松管理应用程序的菜单和导航。

前置条件

在开始之前，你需要确保已经安装了以下软件：

Vue.js
Element UI
Node.js 和 npm

从零开始构建侧边栏导航栏

1. 初始化项目

创建一个新的 Vue 项目并安装 Element UI：

vue create vue-element-admin
cd vue-element-admin
npm install element-ui

2. 创建导航栏组件

在 src 目录中创建一个名为 Sidebar.vue 的新文件，并添加以下代码：

<template>
  <el-menu
    :default-openeds="defaultOpened"
    router
    class="el-menu-demo"
    mode="vertical"
    background-color="#334155"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
  >
    <el-menu-item index="1" to="/home">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-setting"></i>
        <span>设置</span>
      </template>
      <el-menu-item index="2-1" to="/setting/user">
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="2-2" to="/setting/role">
        <span slot="title">角色管理</span>
      </el-menu-item>
    </el-submenu>
    <el-menu-item index="3" to="/about">
      <i class="el-icon-info"></i>
      <span slot="title">关于</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultOpened: ['1', '3'],
    };
  },
};
</script>

<style>
.el-menu {
  border-right: none;
}
.el-menu--collapse .el-menu-item {
  height: 36px;
  line-height: 36px;
}
</style>

3. 注册组件

在 src/main.js 中注册 Sidebar 组件：

import Sidebar from './components/Sidebar.vue';

Vue.component('sidebar', Sidebar);

4. 使用侧边栏组件

在需要显示侧边栏的位置添加以下代码：

<sidebar></sidebar>

通过后台接口动态渲染菜单

为了使导航栏更加灵活，我们可以通过后台接口动态渲染菜单数据。

1. 获取菜单数据

在 Vuex store 中创建获取菜单数据的 action：

import axios from 'axios';

export const getMenus = async ({ commit }) => {
  const { data } = await axios.get('/api/menus');
  commit('SET_MENUS', data);
};

2. 存储菜单数据

在 Vuex store 中创建存储菜单数据的 mutation：

export const SET_MENUS = (state, menus) => {
  state.menus = menus;
};

3. 渲染菜单

在 Sidebar 组件中，使用 computed 属性从 store 中获取菜单数据并渲染：

<template>
  <el-menu
    :default-openeds="defaultOpened"
    router
    class="el-menu-demo"
    mode="vertical"
    background-color="#334155"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
  >
    <el-menu-item v-for="menu in menus" :key="menu.id" :index="menu.id" :to="menu.path">
      <i :class="menu.icon"></i>
      <span slot="title">{{ menu.title }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['menus']),
  },
};
</script>