用 Vue-CLI 3 + ElementUI 快速搭建轻量级后台管理系统

2023-12-18 15:59:20

打造轻量级后台管理系统：基于 Vue-CLI 和 ElementUI 的快速指南

在当今数据驱动的时代，企业和组织对于一个高效且可靠的后台管理系统有着迫切的需求，它能有效管理数据，优化业务流程并做出明智的决策。基于 Vue.js 的管理系统备受青睐，例如 Vue-Element-Admin 和 IView-Admin，它们提供丰富的功能和美观的界面。然而，这些系统往往体积庞大，并不适用于小型团队或资源有限的项目。本文将介绍如何利用 Vue-CLI 3 和 ElementUI 快速构建一个轻量级的后台管理系统，满足此类场景的需求。

搭建步骤

1. 安装 Vue-CLI 3 和 ElementUI

npm install -g @vue/cli
npm install element-ui -s

2. 创建项目

vue create my-admin

3. 添加 ElementUI

在 src/main.js 中引入 ElementUI：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

4. 创建路由

在 src/router/index.js 中定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

export default router

5. 创建组件

在 src/views/Home.vue 中创建主页组件：

<template>
  <div>
    <h1>后台管理系统</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

实际应用

完成了框架搭建后，就可以根据具体业务需求添加功能模块，如用户管理、数据管理、权限管理等。

用户管理

<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="role" label="角色" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { name: 'John', email: 'john@example.com', role: 'admin' },
        { name: 'Mary', email: 'mary@example.com', role: 'user' }
      ]
    }
  }
}
</script>

数据管理

<template>
  <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Data',
  data() {
    return {
      data: [
        { id: 1, title: '数据1', content: '内容1' },
        { id: 2, title: '数据2', content: '内容2' }
      ]
    }
  }
}
</script>

权限管理

<template>
  <div>
    <el-select v-model="role">
      <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button @click="saveRole">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'Permissions',
  data() {
    return {
      roles: [
        { value: 'admin', label: '管理员' },
        { value: 'user', label: '用户' }
      ],
      role: ''
    }
  },
  methods: {
    saveRole() {
      // 保存角色
    }
  }
}
</script>