用 Vue 3 + Element Plus 开发后台管理系统：从基础到进阶

2023-11-17 01:33:40

使用 Vue 3 + Element Plus 构建高效的后台管理系统

随着企业数字化转型的加速，对后台管理系统的需求与日俱增。传统开发技术复杂、周期长、维护成本高，而 Vue 3 + Element Plus 组合的出现为解决这些问题提供了绝佳方案。本文将深入探讨如何利用 Vue 3 和 Element Plus 的强大功能，一步步构建一个高效的后台管理系统。

搭建项目环境

构建后台管理系统的第一步是搭建项目环境。本文采用 Vue CLI 作为项目脚手架，同时需要安装 Node.js、Vue 3、Element Plus 和数据库（如 MySQL 或 PostgreSQL）。环境搭建完成后，即可创建新的 Vue 3 项目。

配置路由

路由是后台管理系统中不可或缺的组件。在 src/router/index.js 文件中，配置路由规则。路由规则定义了不同的页面或组件与特定 URL 路径之间的映射关系。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

编写组件

组件是构建 Vue 应用程序的基本单元。在 src/components 目录下，创建 HelloWorld.vue 组件，展示欢迎信息。

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

在 src/views/Home.vue 文件中，引入并使用 HelloWorld 组件。

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld.vue'

export default {
  components: { HelloWorld }
}
</script>

处理表单

后台管理系统通常需要处理表单数据，如登录表单、新增用户表单等。在 src/components 目录下，创建 Form.vue 组件，处理表单提交。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit() {
      // 这里可以进行表单验证和数据提交
    }
  }
}
</script>

在 src/views/Home.vue 文件中，引入并使用 Form 组件。

<template>
  <div>
    <Form />
  </div>
</template>

<script>
import Form from '../components/Form.vue'

export default {
  components: { Form }
}
</script>

连接数据库

后台管理系统需要与数据库交互，存储和查询数据。在 src/plugins/db.js 文件中，连接数据库。

import Vue from 'vue'
import { createConnection } from 'mysql2'

const connection = createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'vue3_element_admin'
})

Vue.prototype.$db = connection

在 src/main.js 文件中，使用 Vuex 将数据库连接注入 Vue 实例。

import Vue from 'vue'
import App from './App.vue'
import db from './plugins/db'

Vue.config.productionTip = false

Vue.use(db)

new Vue({
  render: h => h(App)
}).$mount('#app')