Vue2+ElementUI 实战：从 0 搭建企业级后台管理系统（含权限控制 + 性能优化）
本文提供Vue2+ElementUI企业级后台管理系统开发全流程实战指南。通过稳定技术栈组合（Vue2.6+ElementUI2.15），详细讲解架构设计、权限控制（路由/角色/按钮）、性能优化（虚拟滚动/懒加载）等核心功能实现。包含规范的目录结构、全局配置封装、数据表格优化等企业级解决方案，并针对生产环境常见问题提供避坑指南。附带完整项目GitHub地址和实用工具函数，帮助开发者从0到1构建可直
文章目录
目录
在前端开发领域，Vue2+ElementUI 组合堪称企业级后台管理系统的“黄金搭档”。但不少开发者跟着基础教程做完项目后，一上线就陷入困境：数据刚过千表格就卡顿、普通用户能直接访问管理员页面、生产环境样式莫名丢失……这些“落地坑”，正是基础教程缺失的“企业级细节”。
本文带你从 0 到 1 搭建一套可直接投产的后台系统，覆盖架构设计、权限控制、性能优化全链路，所有代码均附详细注释，新手也能轻松上手。
一、技术栈选型：拒绝“版本兼容火葬场”
企业级项目的首要原则是“稳定”，盲目追新易踩兼容坑。以下是经过生产验证的技术栈组合，附版本匹配说明：
|
技术栈 |
推荐版本 |
核心作用 |
兼容要点 |
|
Vue |
2.6.14 |
核心框架 |
避开 2.5.x 响应式 bug，完美适配 ElementUI 2.15.x |
|
ElementUI |
2.15.13 |
UI 组件库 |
Vue2 专属最终稳定版，修复大量兼容性问题 |
|
Vuex |
3.6.2 |
状态管理 |
Vue2 生态标配，与 VueRouter 3.x 无缝衔接 |
|
VueRouter |
3.5.4 |
路由管理 |
支持路由守卫，是权限控制的核心依赖 |
|
Axios |
0.27.2 |
HTTP 请求 |
避开 1.x 版本破坏性更新，API 稳定 |
|
vue-virtual-scroller |
1.0.11 |
虚拟滚动 |
解决大数据列表卡顿问题 |
|
避坑预警：Element Plus 仅支持 Vue3，Vue2 项目切勿误用！ElementUI 2.15.x 是 Vue2 的“终极版本”，官方已停止更新但会维护 bug。 |
初始化项目命令（需提前安装 Vue CLI 3+）：
|
bash |
二、架构设计：从“能跑”到“好维护”
企业级项目的生命周期往往长达数年，规范的架构是“可维护性”的基石。核心思路是按“职责分层”，让每个文件的作用清晰明确。
2.1 目录结构规范：一目了然的分层逻辑
采用“视图/组件/工具/状态/路由”分层思想，目录树及核心说明如下：
|
plaintext |
2.2 全局配置封装：一次配置，全局复用
全局配置的核心是“统一管理”，避免重复代码和修改漏项。重点封装 3 个模块：ElementUI 按需引入、Axios 拦截、环境变量。
2.2.1 ElementUI 按需引入（减小打包体积）
全量引入 ElementUI 会增加 1M+ 打包体积，按需引入仅加载使用的组件。配置步骤如下：
1. 修改 babel.config.js，添加按需引入插件：
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk' // 对应 ElementUI 样式
}
]
]
}2. 新建 src/plugins/element.js，引入所需组件：
import Vue from 'vue'
import { Button, Table, TableColumn, Form, FormItem, Input, Message } from 'element-ui'
// 注册组件
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 挂载非组件 API（如 Message）
Vue.prototype.$message = Message3. 在 main.js 中引入配置：
import './plugins/element.js'2.2.2 Axios 封装（请求/响应统一处理）
直接使用 Axios 会导致接口请求代码冗余，封装后可统一处理 token 携带、错误拦截。新建 src/utils/request.js：
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建 Axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 环境变量（区分开发/生产）
timeout: 5000
})
// 请求拦截器（添加 token）
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 携带 token（后端约定 Bearer 格式）
config.headers['Authorization'] = `Bearer ${getToken()}`
}
return config
},
error => {
console.log('请求错误：', error)
return Promise.reject(error)
}
)
// 响应拦截器（统一错误处理）
service.interceptors.response.use(
response => {
const res = response.data
// 后端约定：code=200 为成功
if (res.code !== 200) {
Message({
message: res.message || '操作失败',
type: 'error',
duration: 3000
})
// token 过期（code=401），需重新登录
if (res.code === 401) {
MessageBox.confirm(
'登录状态已过期，请重新登录',
'确认退出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('user/logout').then(() => {
location.reload() // 强制刷新避免路由缓存
})
})
}
return Promise.reject(res.message)
} else {
return res
}
},
error => {
// 网络错误（404、500 等）
Message({
message: error.message,
type: 'error',
duration: 3000
})
return Promise.reject(error)
}
)
export default service配套的 token 工具（src/utils/auth.js）：
// 获取 token
export function getToken() {
return localStorage.getItem('token')
}
// 存储 token
export function setToken(token) {
return localStorage.setItem('token', token)
}
// 删除 token
export function removeToken() {
return localStorage.removeItem('token')
}2.2.3 环境变量配置（开发/生产切换）
开发和生产环境的接口地址、调试模式不同，用环境变量可实现“一键切换”。
1. 根目录创建 .env.development（开发环境）：
# 开发环境接口基础地址
VUE_APP_BASE_API = 'http://localhost:8080/dev-api'
# 环境标识
VUE_APP_ENV = 'development'2. 根目录创建 .env.production（生产环境）：
# 生产环境接口基础地址
VUE_APP_BASE_API = 'http://api.yourdomain.com/prod-api'
VUE_APP_ENV = 'production'三、核心功能实战：企业级需求落地
这部分是项目核心，覆盖权限控制、数据表格、表单封装三大高频需求，代码可直接复用。
3.1 权限控制：从路由到按钮的全维度管控
企业级后台必须实现“三层权限控制”：路由权限（未登录不准进）、角色权限（普通用户不准看管理员页）、按钮权限（普通用户不准删数据）。
3.1.1 路由权限（路由守卫）
将路由分为“公开路由”和“受保护路由”，通过路由守卫判断权限。修改 src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'
Vue.use(Router)
// 公开路由（无需登录）
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/Login'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
}
]
// 受保护路由（需登录+对应权限）
export const asyncRoutes = [
{
path: '/',
component: () => import('@/views/Layout'),
redirect: '/home',
children: [
{
path: 'home',
name: 'Home',
component: () => import('@/views/Home'),
meta: { title: '首页', roles: ['admin', 'user'] } // 支持的角色
}
]
},
// 管理员专属路由
{
path: '/user',
component: () => import('@/views/Layout'),
meta: { title: '用户管理', roles: ['admin'] }, // 仅 admin 可访问
children: [
{
path: 'list',
component: () => import('@/views/User/List'),
meta: { title: '用户列表', roles: ['admin'] }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// 路由前置守卫（权限判断核心）
router.beforeEach(async (to, from, next) => {
document.title = to.meta.title || '后台管理系统'
const hasToken = store.getters.token
if (hasToken) {
// 已登录：不准再进登录页
if (to.path === '/login') {
next({ path: '/' })
} else {
// 判断是否已获取用户角色
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next() // 已获取角色，直接放行
} else {
try {
// 未获取角色：调用接口获取用户信息
const { roles } = await store.dispatch('user/getInfo')
// 根据角色筛选可访问的路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 动态添加路由
router.addRoutes(accessRoutes)
// 确保路由添加完成
next({ ...to, replace: true })
} catch (error) {
// token 无效：清除 token 并跳转登录页
await store.dispatch('user/logout')
Message.error(error.message || '登录失效，请重新登录')
next(`/login?redirect=${to.path}`)
}
}
}
} else {
// 未登录：仅允许访问公开路由
if (constantRoutes.some(route => route.path === to.path)) {
next()
} else {
next(`/login?redirect=${to.path}`) // 跳登录页并记录目标路径
}
}
})
export default router3.1.2 角色权限（Vuex 筛选路由）
新建 src/store/modules/permission.js，根据用户角色筛选路由：
import { asyncRoutes, constantRoutes } from '@/router'
// 判断角色是否有权限访问路由
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.includes(role))
}
return true // 未配置 roles 的路由默认可访问
}
// 递归筛选路由
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
if (hasPermission(roles, tmp)) {
if (tmp.children) {
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
res.push(tmp)
}
})
return res
}
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
// admin 拥有所有权限
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}3.1.3 按钮权限（自定义指令）
新建 src/directive/permission.js，通过自定义指令控制按钮显示隐藏：
import Vue from 'vue'
import store from '@/store'
// 自定义指令 v-permission
Vue.directive('permission', {
inserted(el, binding) {
const { value } = binding
const roles = store.getters.roles
if (value && value instanceof Array) {
const hasPermission = roles.some(role => value.includes(role))
// 无权限则移除按钮
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error('v-permission 指令值必须是数组，如 v-permission="[\'admin\']"')
}
}
})在 main.js 引入指令后，使用方式如下：
<!-- vue -->
<!-- 仅 admin 可见 -->
<el-button type="danger" v-permission="['admin']">批量删除</el-button>
<!-- 所有角色可见 -->
<el-button v-permission="['admin', 'user']">查看</el-button>3.2 数据表格：解决大数据卡顿问题
ElementUI Table 是后台核心组件，但数据量超 1000 条会卡顿。本文实现“分页+筛选+排序+批量操作”，并通过虚拟滚动优化大数据渲染。
核心代码（src/views/User/List.vue）：
<!-- vue -->
<template>
<div class="user-list">
<!-- 搜索栏 -->
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item label="用户名">
<el-input v-model="searchForm.username" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getUserList">搜索</el-button>
</el-form-item>
</el-form>
<!-- 大数据表格（虚拟滚动优化） -->
<virtual-scroller
class="table-container"
:items="tableData"
:item-size="50" <!-- 行高与表格一致 -->
key-field="id"
>
<el-table
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" sortable></el-table-column>
<el-table-column prop="username" label="用户名" sortable></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" v-permission="['admin']" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</virtual-scroller>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-sizes="[10, 20, 50]"
:page-size="pagination.pageSize"
:total="pagination.total"
layout="total, sizes, prev, pager, next, jumper"
class="pagination"
></el-pagination>
</div>
</template>
<script>
import { getUserList, deleteUser } from '@/api/user'
export default {
data() {
return {
searchForm: { username: '' },
tableData: [],
pagination: { currentPage: 1, pageSize: 10, total: 0 },
selectedIds: [] // 批量选择的 ID
}
},
created() {
this.getUserList()
},
methods: {
// 获取用户列表
async getUserList() {
const params = {
pageNum: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
username: this.searchForm.username
}
const res = await getUserList(params)
this.tableData = res.data.list
this.pagination.total = res.data.total
},
// 分页切换
handleSizeChange(pageSize) {
this.pagination.pageSize = pageSize
this.getUserList()
},
handleCurrentChange(currentPage) {
this.pagination.currentPage = currentPage
this.getUserList()
},
// 批量选择
handleSelectionChange(val) {
this.selectedIds = val.map(item => item.id)
},
// 单个删除
async handleDelete(row) {
await this.$confirm('确定删除该用户？', '提示', { type: 'warning' })
await deleteUser(row.id)
this.$message.success('删除成功')
this.getUserList()
}
}
}
</script>
<style scoped>
.table-container { height: 500px; }
.pagination { margin-top: 20px; text-align: right; }
</style>|
优化效果：10000 条数据表格，优化前渲染 10000 个 DOM 元素，优化后仅渲染可视区域 20 个左右，卡顿问题完全解决。 |
四、性能优化：从“能用”到“好用”
4.1 路由/组件懒加载
通过 () => import() 语法实现按需加载，减少首屏加载体积：
// 路由懒加载（已在路由配置中实现）
const Home = () => import('@/views/Home')
// 组件懒加载（大型组件单独加载）
export default {
components: {
BigComponent: () => import('@/components/BigComponent')
}
}4.2 ElementUI 按需引入体积对比
使用 webpack-bundle-analyzer 分析打包体积，对比效果如下：
1. 安装分析工具：npm i webpack-bundle-analyzer -D
2. package.json 添加脚本："analyze": "vue-cli-service build --report"
3. 执行 npm run analyze 生成分析报告：
全量引入时，ElementUI 相关资源约 1.2MB；按需引入后，仅 200KB 左右，体积减少 80%+。
五、避坑指南：生产环境常见问题
5.1 ElementUI DatePicker 日期格式问题
问题：选择日期后，传给后端的是 Date 对象而非字符串，导致接口报错。
解决：通过 value-format 指定输出格式：
//vue
<el-date-picker
v-model="formData.time"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd" <!-- 关键配置 -->
></el-date-picker>5.2 Vue2 响应式数据更新不触发视图
问题：给数组新增元素、修改对象属性时，视图不更新。
解决：使用 Vue 提供的响应式方法：
// 数组修改（避免直接通过索引赋值）
this.$set(this.array, index, value)
this.array.push(value) // push、pop 等方法是响应式的
// 对象修改（避免直接添加属性）
this.$set(this.obj, 'newKey', value)
this.obj = { ...this.obj, newKey: value }问题：开发环境正常，打包后 ElementUI 样式消失。
解决：在 main.js 手动引入核心样式：
import 'element-ui/lib/theme-chalk/index.css'六、项目部署：Vue2 + Nginx 落地
6.1 打包配置
修改 vue.config.js（无则新建），配置打包路径：
module.exports = {
// 生产环境打包路径（根据 Nginx 配置调整）
publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/'
};执行打包命令：npm run build，生成 dist 文件夹。
6.2 Nginx 部署
1. 把 dist 文件夹放到 Nginx 的 html 目录下。
2. 修改 Nginx 配置（nginx.conf）：
3. 重启 Nginx：nginx -s reload，访问域名即可看到项目。
server {
listen 80;
server_name yourdomain.com; # 你的域名
location /admin { # 对应 publicPath
root html;
index index.html;
try_files $uri $uri/ /admin/index.html; # 解决路由刷新404
}
# 接口代理（避免跨域）
location /prod-api {
proxy_pass http://api.yourdomain.com/prod-api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}七、福利放送：项目有关资源
1.vue2官网：https://cn.vuejs.org/
2.vue.js 三种方式安装（引用下大佬的文章）：https://blog.csdn.net/muzidigbig/article/details/80490884?fromshare=blogdetail&sharetype=blogdetail&sharerId=80490884&sharerefer=PC&sharesource=nxp765&sharefrom=from_link
3.element组件官网：https://element.eleme.cn/#/zh-CN
4. 常用工具函数集合（部分）：
// 日期格式化
export function formatDate(date, fmt = 'yyyy-MM-dd HH:mm:ss') {
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
}
}
return fmt
}
// 权限判断工具
export function hasRole(roles, role) {
return roles && roles.includes(role)
}本文从架构设计到部署落地，覆盖了 Vue2+ElementUI 后台系统的全流程。实际开发中，可根据业务需求扩展功能（如文件上传、富文本编辑）。如果有疑问，欢迎在评论区留言，我会第一时间回复！
觉得有用的话，点赞+收藏+关注，后续会更新更多企业级实战教程！
更多推荐
30
0- 0
已为社区贡献1条内容
所有评论(0)