基于Vue3 + Element Plus 的后台管理系统详细教程

最新推荐文章于 2025-04-10 16:56:40 发布

一花一world

最新推荐文章于 2025-04-10 16:56:40 发布

阅读量2.6w

点赞数 20

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131196056

版权

本文介绍了Vue3的新特性，如CompositionAPI和Teleport，以及如何结合ElementPlus创建后台管理系统。通过VueCLI创建项目，安装并使用ElementPlus，创建路由和Vuexstore，实现了登录、权限管理和数据操作的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3 概述

Vue.js 是一种轻量级MVVM框架，它通过双向绑定的方式，将视图与数据进行关联，简化了前端开发的流程。Vue3 是 Vue.js 的下一个版本，与早期版本相比，它具有更高的性能和更好的开发体验。

Composition API

Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。

Teleport

Teleport 是 Vue 3 中的一个新特性，它允许开发人员将一个组件的内容渲染到应用程序 DOM 中的任何位置。这对于实现带有模态框或弹出菜单的应用程序很有用。

Element Plus 概述

Element Plus 是一个基于 Vue 3 的开源 UI 组件库，它是 Element UI 的升级版。

Element Plus 提供了一些常见的组件和样式，比如表单和按钮，可以轻松地构建一个漂亮的 UI 界面。

使用 Vue3 和 Element Plus 创建后台管理系统的步骤

3.1 创建一个 Vue3 项目

使用 Vue CLI 创建一个新的 Vue3 项目：

vue create my-project

3.2 安装 Element Plus

使用 npm 或 yarn 安装 Element Plus：

yarn add element-plus

3.3 引入 Element Plus

在 main.js 文件中，引入 Element Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3.4 使用组件

在组件中，使用 Element Plus 提供的组件：

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

3.5 创建路由

创建路由，并将路由添加到应用程序中：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = createApp(App)

app.use(router)
app.mount('#app')

3.6 创建 Vuex store

创建 Vuex store：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

在组件中使用 Vuex：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <el-button @click="increment">Increment</el-button>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    const count = computed(() => {
      return store.getters.getCount
    })

    const increment = () => {
      store.dispatch('increment')
    }

    return { count, increment }
  }
}
</script>

以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。

登录和权限管理功能

4.1 搭建登录页面

在页面中创建一个登录表单

<template>
  <div class="login-form">
    <el-form ref="loginForm" :model="loginParams" :rules="loginRules" :class="{ 'form-invalid': !loginFormValid }">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginParams.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginParams.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。

export default {
  data() {
    return {
      loginParams: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          login(this.loginParams.username, this.loginParams.password)
            .then(() => {
              this.$message.success('登录成功')
              this.$router.push('/')
            })
            .catch((error) => {
              console.error(error)
              this.$message.error('登录失败')
            })
        }
      })
    }
  },
  computed: {
    loginFormValid() {
      return this.$refs.loginForm ? this.$refs.loginForm.form.valid : true
    }
  }
}

4.2 登录状态切换

登录状态的切换可以使用 Vuex 进行管理。

在 Vuex store 中，存储当前用户的登录状态和用户信息：

const store = createStore({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    setAuthenticated(state, isAuthenticated) {
      state.isAuthenticated = isAuthenticated
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    login(context, credentials) {
      // 登录操作并设置 isAuthenticated 和 user
    },
    logout(context) {
      // 退出登录操作并重置 isAuthenticated 和 user
    }
  }
})

在 App.vue 中，使用 computed 属性监听 isAuthenticated 的变化，根据其值显示不同的导航栏内容：

<template>
  <div>
    <el-header>
      <el-menu :default-active="$route.path" mode="horizontal">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/about">关于</el-menu-item>
        <el-submenu v-if="isAuthenticated" index="user">
          <template #title>
            <i class="el-icon-user"></i> {{ user.name }}
          </template>
          <el-menu-item index="profile">个人资料</el-menu-item>
          <el-menu-item index="logout" @click="handleLogout">退出登录</el-menu-item>
        </el-submenu>
        <el-menu-item v-else index="/login">登录</el-menu-item>
      </el-menu>
    </el-header>
    <router-view></router-view>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  computed: {
    isAuthenticated() {
      return useStore().state.isAuthenticated
    },
    user() {
      return useStore().state.user
    }
  },
  methods: {
    handleLogout() {
      useStore().dispatch('logout')
    }
  }
}
</script>

在登录页面中，使用表单提交用户的登录凭证，并在成功登录后设置 isAuthenticated 和 user：

<template>
  <div>
    <h2>登录</h2>
    <el-form ref="form" :model="credentials" :rules="formRules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="credentials.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="credentials.password"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleSubmit">登录</el-button>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  data() {
    return {
      credentials: {
        username: '',
        password: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { username, password } = this.credentials
          useStore().dispatch('login', { username, password }).then(() => {
            this.$router.push('/')
          })
        }
      })
    }
  }
}
</script>

4.3 路由守卫

使用路由守卫实现登录状态的拦截和权限管理。

在路由配置中，使用 beforeEnter 守卫进行登录状态的拦截：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home, meta: { requiresAuth: true } },
    { path: '/login', component: Login },
    { path: '/about', component: About, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login')
  } else {
    next()
  }
})

在组件中，使用 beforeRouteEnter 守卫获取当前用户的权限信息：

export default {
  beforeRouteEnter(to, from, next) {
    const store = useStore()

    store.dispatch('getUserInfo').then(() => {
      if (!store.getters.hasPermission(to.meta.permission)) {
        next('/')
      } else {
        next()
      }
    })
  }
}

4.4 数据增删改查

使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。

4.4.1 数据展示

使用 el-table 组件展示数据，并通过 el-pagination 组件实现分页：

<template>
  <div>
    <el-table :data="tableData" stripe>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 获取数据并更新 tableData 和 total
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    },
    handleEdit(row) {
      // 编辑数据
    },
    handleDelete(row) {
      // 删除数据
    }
  }
}
</script>

4.4.2 数据添加和编辑

使用 el-dialog 和 el-form 组件实现数据的添加和编辑：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加</el-button>
    <el-dialog title="添加数据" :visible.sync="dialogVisible">
      <el-form ref="form" :model="formData" :rules="formRules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        name: '',
        age: '',
        gender: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交数据并关闭 dialog
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

4.5 权限管理

使用 Vuex 存储当前用户的权限信息，并在路由守卫中判断当前用户是否具有访问该页面的权限。

在 Vuex store 中，存储当前用户的权限信息：

const store = createStore({
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, permissions) {
      state.permissions = permissions
    }
  },
  actions: {
    getUserInfo(context) {
      return getUserInfo().then((response) => {
        context.commit('setPermissions', response.data.permissions)
      })
    }
  },
  getters: {
    hasPermission: (state) => (permission) => {
      return state.permissions.includes(permission)
    }
  }
})

在路由配置中，使用 meta 属性存储当前页面所需的权限信息：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home, meta: { requiresAuth: true, permission: 'view_home' } },
    { path: '/login', component: Login },
    { path: '/about', component: About, meta: { requiresAuth: true, permission: 'view_about' } }
  ]
})

在组件中，使用 beforeRouteEnter 守卫获取当前用户的权限信息，并判断当前用户是否具有访问该页面的权限：

export default {
  beforeRouteEnter(to, from, next) {
    const store = useStore()

    store.dispatch('getUserInfo').then(() => {
      if (!store.getters.hasPermission(to.meta.permission)) {
        next('/')
      } else {
        next()
      }
    })
  }
}