货运搬家小程序系统源码开发从0到1（十一）：管理后台，Vue3 + Element Plus实例研发

业务三端（用户、司机、订单、钱包）都通了，还差给运营用的管理后台。这篇从零搭后台框架，含一个我亲自踩过的 import 坑。

技术选型一句话

Vue3 + Vite 5 + Element Plus 2.7 + vue-router 4 + axios + ECharts。不用 TS（后台页类型简单，开发速度优先），不引 Pinia（全局状态只有 token，localStorage 足够）。

项目结构

admin-web/ ├── vite.config.js # 端口 5174 + /api 代理到 8080 └── src/ ├── main.js # 入口：挂 ElementPlus（中文 locale） ├── router.js # 路由 + 登录守卫 ├── api.js # axios 实例 + 全部接口函数 └── views/ # Login / Layout / Dashboard / Orders / # Drivers / Users / VehicleTypes / Finance

跨域用 Vite 代理解决（开发期），生产环境由 Nginx 反代同域，代码里请求路径永远写/api/...，两套环境零改动：

// vite.config.jsserver:{port:5174,proxy:{'/api':{target:'http://localhost:8080',changeOrigin:true}}}

登录守卫：10 行搞定

router.beforeEach((to)=>{if(to.path!=='/login'&&!localStorage.getItem('admin_token')){return'/login'}})

管理端用独立的 token（和 C 端 JWT 体系分开，role=ADMIN），axios 拦截器统一带上，401 跳登录页。

我踩的坑：具名导入 vs 默认导出

启动时页面白屏，控制台报createRouter is not a function。原因：

// ❌ router.js 是 export default router，却按具名导入import{createRouter}from'./router'// ✅ 正确：导入默认导出的实例importrouterfrom'./router'app.use(router)

Vue3 全家桶导入方式不统一（createApp是从 vue 具名导入，router 实例是默认导出），写快了就容易混。白屏先看控制台，十有八九是 import 问题。

页面清单与克制

第一版后台只做 6 个页面：仪表盘（下篇展开）、订单管理（筛选/取消）、司机审核、用户列表、车型费率 CRUD、财务流水（含提现打款）。没做的角色权限（RBAC）、操作日志、导出 Excel，全部后置——后台第一用户是你自己的运营，先问他们每天要做什么，再做页面。

Element Plus 的中文化记得配（zhCnlocale），不然分页器全是英文。

本篇成果

后台骨架立起来：登录 → 布局（深色侧边栏 + 顶栏）→ 6 个业务页面路由全通。下篇写仪表盘的 ECharts 数据看板，把"今日营收、订单分布"做成打开后台第一眼看到的东西。

---