Vue3+Element Plus后台管理系统开发

后台管理系统是每个Web开发者必备的技能。Vue3+Element Plus是目前最流行的后台管理系统技术栈，组合式API更灵活，Element Plus组件丰富，开发效率极高。

今天康哥工作室就手把手教大家，用Vue3+Element Plus开发一个完整的后台管理系统。

一、技术栈选型

1. 核心框架
- Vue3：使用组合式API（Composition API），逻辑更清晰，复用更方便
- Vite：新一代构建工具，启动快，热更新快
- Vue Router 4：路由管理
- Pinia：Vue3官方推荐的状态管理，替代Vuex
- Element Plus：Vue3版的Element UI，组件丰富

2. 辅助工具
- Axios：HTTP请求库
- ECharts：数据可视化图表
- dayjs：日期处理
- nprogress：顶部进度条
- Sass：CSS预处理器

二、项目搭建

1. 使用Vite创建项目
npm create vite@latest admin-system -- --template vue
cd admin-system
npm install

2. 安装依赖
npm install vue-router@4 pinia element-plus axios echarts dayjs nprogress
npm install -D sass

3. 项目目录结构
src/
├── api/ # 接口请求
├── assets/ # 静态资源
├── components/ # 公共组件
├── layout/ # 布局组件
├── router/ # 路由配置
├── store/ # 状态管理
├── styles/ # 全局样式
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue
└── main.js

三、路由配置

1. 基础路由配置（router/index.js）
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { title: '登录', requiresAuth: false }
},
{
path: '/',
component: () => import('@/layout/index.vue'),
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: { title: '首页', icon: 'HomeFilled' }
},
{
path: 'user',
name: 'User',
component: () => import('@/views/user/index.vue'),
meta: { title: '用户管理', icon: 'User' }
},
{
path: 'order',
name: 'Order',
component: () => import('@/views/order/index.vue'),
meta: { title: '订单管理', icon: 'List' }
}
]
}
]

const router = createRouter({
history: createWebHistory(),
routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requiresAuth !== false && !token) {
next('/login')
} else {
next()
}
})

export default router

四、状态管理（Pinia）

1. 用户状态（store/user.js）
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
state: () => ({
token: localStorage.getItem('token') || '',
userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}')
}),
actions: {
setToken(token) {
this.token = token
localStorage.setItem('token', token)
},
setUserInfo(info) {
this.userInfo = info
localStorage.setItem('userInfo', JSON.stringify(info))
},
logout() {
this.token = ''
this.userInfo = {}
localStorage.removeItem('token')
localStorage.removeItem('userInfo')
}
}
})

五、Axios封装

1. 请求封装（utils/request.js）
import axios from 'axios'
import { ElMessage } from 'element-plus'

const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000
})

// 请求拦截器
service.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
error => Promise.reject(error)
)

// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
ElMessage.error(res.message || '请求失败')
return Promise.reject(new Error(res.message || 'Error'))
}
return res
},
error => {
ElMessage.error(error.message || '网络错误')
return Promise.reject(error)
}
)

export default service

2. 接口定义（api/user.js）
import request from '@/utils/request'

export function login(data) {
return request({
url: '/api/login',
method: 'post',
data
})
}

export function getUserList(params) {
return request({
url: '/api/user/list',
method: 'get',
params
})
}

六、布局组件

1. 主布局（layout/index.vue）
<template>
<el-container class="layout">
<el-aside width="220px">
<Sidebar />
</el-aside>
<el-container>
<el-header>
<Navbar />
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</template>

2. 侧边栏菜单（根据路由自动生成）
使用el-menu组件，遍历路由配置生成菜单，支持多级菜单和图标。

七、权限控制

1. 按钮级权限
// 自定义指令
app.directive('permission', {
mounted(el, binding) {
const permissions = store.user.permissions
if (!permissions.includes(binding.value)) {
el.parentNode.removeChild(el)
}
}
})

// 使用
<el-button v-permission="'user:add'">新增用户</el-button>

2. 路由级权限
根据用户角色动态添加路由，不同角色看到不同菜单。

八、常用页面开发

1. 列表页模板
<template>
<div class="user-list">
<!-- 搜索栏 -->
<el-form :inline="true" :model="queryForm">
<el-form-item label="用户名">
<el-input v-model="queryForm.username" placeholder="请输入" />
</el-form-item>
<el-button type="primary" @click="getList">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</el-form>

<!-- 表格 -->
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="username" label="用户名" />
<el-table-column prop="email" label="邮箱" />
<el-table-column prop="create_time" label="创建时间" />
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>

<!-- 分页 -->
<el-pagination
v-model:current-page="queryForm.page"
v-model:page-size="queryForm.limit"
:total="total"
@current-change="getList"
/>
</div>
</template>

2. 表单弹窗
用el-dialog+el-form实现新增/编辑弹窗，表单验证用el-form的rules。

九、性能优化

1. 路由懒加载
所有页面组件用import()动态导入，减少首屏加载体积。

2. 组件按需引入
Element Plus按需引入，不要全量引入，减少打包体积。

3. 图片懒加载
用v-lazy指令，图片进入视口才加载。

4. 虚拟列表
表格数据量大时，用虚拟滚动，只渲染可见区域。

5. 打包优化
- 配置rollupOptions，大依赖单独打包
- 开启gzip压缩
- 配置CDN，Vue、ECharts等用CDN引入

十、部署上线

1. 打包
npm run build

2. Nginx配置
server {
listen 80;
server_name yourdomain.com;
root /www/admin/dist;
index index.html;

# history模式
location / {
try_files $uri $uri/ /index.html;
}

# 接口代理
location /api/ {
proxy_pass http://127.0.0.1:8080/api/;
}
}

十一、总结

Vue3+Element Plus开发后台管理系统的核心流程：
1. 用Vite搭建项目，安装依赖
2. 配置路由，做路由守卫
3. 用Pinia做状态管理
4. 封装Axios，统一请求和错误处理
5. 开发布局组件（侧边栏、顶部栏、主内容区）
6. 做权限控制（路由级+按钮级）
7. 开发列表页、表单页、详情页等常用页面
8. 性能优化，部署上线

掌握了这套流程，你可以快速开发任何后台管理系统。Element Plus提供了丰富的组件，大部分页面都是表格+表单+弹窗的组合，熟练之后开发效率非常高。

康哥工作室在Vue3后台管理系统开发方面有丰富经验，如果你需要开发后台管理系统，或者有相关技术问题，欢迎联系我们咨询。