Vue后台管理系统：轻松构建通用管理后台

2023-05-18 14:51:03

Vue + Element-UI + ECharts：开发通用管理后台的完整指南

简介

构建一个用户友好且功能强大的管理后台对于任何企业或组织至关重要。本文将详细介绍如何使用 Vue.js、Element-UI 和 ECharts 构建一个全面的通用管理后台。我们将涵盖从项目设置到开发关键组件的一切内容，如左侧菜单栏和仪表板。

安装和项目设置

首先，您需要安装 Vue CLI：

npm install -g @vue/cli

然后，创建一个新的 Vue 项目：

vue create vue-admin-system

安装依赖项

为了丰富我们的管理后台，我们需要安装一些额外的依赖项：

npm install element-ui echarts vuex axios mockjs

引入依赖项

在 main.js 中，导入这些依赖项：

import Vue from 'vue'
import ElementUI from 'element-ui'
import ECharts from 'echarts'
import Vuex from 'vuex'
import axios from 'axios'
import mockjs from 'mockjs'

Vue.use(ElementUI)
Vue.use(Vuex)

// axios 二次封装
Vue.prototype.$axios = axios

// mockjs 数据模拟
mockjs.mock('/api/data', {
  'list|10': [
    { 'id|+1': 1, 'name': '@cname', 'age|18-60': 18 }
  ]
})

开发左侧菜单栏

创建 Vuex Store

为了管理左侧菜单栏的状态，我们需要创建一个 Vuex Store：

const store = new Vuex.Store({
  state: {
    isCollapsed: false
  },
  mutations: {
    toggleCollapse(state) {
      state.isCollapsed = !state.isCollapsed
    }
  }
})

创建左侧菜单栏组件

然后，创建左侧菜单栏组件：

<template>
  <el-menu
    :collapse="isCollapsed"
    @collapse="toggleCollapse"
    background-color="#333"
    text-color="#fff"
    active-text-color="#409EFF">
    <el-menu-item index="1">
      <i class="el-icon-location"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">菜单管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'LeftMenu',
  computed: {
    isCollapsed() {
      return this.$store.state.isCollapsed
    }
  },
  methods: {
    toggleCollapse() {
      this.$store.commit('toggleCollapse')
    }
  }
}
</script>

开发 Home 组件

创建 Home 组件

主页是管理后台的核心组件，通常用于显示仪表板。创建 Home 组件：

<template>
  <div class="home">
    <div class="charts">
      <div id="chart1"></div>
      <div id="chart2"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    this.initECharts()
  },
  methods: {
    initECharts() {
      const chart1 = ECharts.init(document.getElementById('chart1'))
      const chart2 = ECharts.init(document.getElementById('chart2'))

      const data1 = [
        { name: '一月', value: 100 },
        { name: '二月', value: 200 },
        { name: '三月', value: 300 },
        { name: '四月', value: 400 },
        { name: '五月', value: 500 },
        { name: '六月', value: 600 }
      ]

      const data2 = [
        { name: '一月', value: 500 },
        { name: '二月', value: 400 },
        { name: '三月', value: 300 },
        { name: '四月', value: 200 },
        { name: '五月', value: 100 },
        { name: '六月', value: 50 }
      ]

      const option1 = {
        title: {
          text: '柱状图'
        },
        xAxis: {
          data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {},
        series: [{
          data: data1,
          type: 'bar'
        }]
      }

      const option2 = {
        title: {
          text: '折线图'
        },
        xAxis: {
          data: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {},
        series: [{
          data: data2,
          type: 'line'
        }]
      }

      chart1.setOption(option1)
      chart2.setOption(option2)
    }
  }
}
</script>