业务三端用户、司机、订单、钱包都通了还差给运营用的管理后台。这篇从零搭后台框架含一个我亲自踩过的 import 坑。技术选型一句话Vue3 Vite 5 Element Plus 2.7 vue-router 4 axios ECharts。不用 TS后台页类型简单开发速度优先不引 Pinia全局状态只有 tokenlocalStorage 足够。项目结构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 体系分开roleADMINaxios 拦截器统一带上401 跳登录页。我踩的坑具名导入 vs 默认导出启动时页面白屏控制台报createRouter is not a function。原因// ❌ router.js 是 export default router却按具名导入import{createRouter}from./router// ✅ 正确导入默认导出的实例importrouterfrom./routerapp.use(router)Vue3 全家桶导入方式不统一createApp是从 vue 具名导入router 实例是默认导出写快了就容易混。白屏先看控制台十有八九是 import 问题。页面清单与克制第一版后台只做 6 个页面仪表盘下篇展开、订单管理筛选/取消、司机审核、用户列表、车型费率 CRUD、财务流水含提现打款。没做的角色权限RBAC、操作日志、导出 Excel全部后置——后台第一用户是你自己的运营先问他们每天要做什么再做页面。Element Plus 的中文化记得配zhCnlocale不然分页器全是英文。本篇成果后台骨架立起来登录 → 布局深色侧边栏 顶栏→ 6 个业务页面路由全通。下篇写仪表盘的 ECharts 数据看板把今日营收、订单分布做成打开后台第一眼看到的东西。