Vue3+ElementUI实战：从零搭建外卖系统前端架构与员工管理模块

1. 技术选型与环境搭建第一次用Vue3ElementUI做外卖系统时我花了整整三天才把环境跑通。现在回头看其实只要抓住几个关键点就能快速上手。先说技术栈这套组合拳在企业级后台开发中特别吃香Vue3用Composition API写代码就像搭积木逻辑复用比Options API爽太多。记得第一次用ref和reactive时那种响应式编程的畅快感至今难忘。ElementUI饿了么团队开源的组件库表格、表单、弹窗这些后台标配组件都现成的。最新版已经完美适配Vue3不用自己造轮子。TypeScript刚开始觉得类型声明麻烦后来发现它简直是大型项目的救命稻草。有次深夜改代码TS直接报错帮我避免了一场线上事故。安装依赖时有个坑要注意用npm install装包经常卡住。后来我发现用yarn安装更稳特别是需要装这些依赖时yarn add vuenext element-plus axios vuexnext vue-router4项目结构建议这样组织/src ├── api # 所有请求封装 ├── components # 公共组件 ├── router # 路由配置 ├── store # Vuex状态管理 ├── utils # 工具函数 └── views # 页面组件2. 员工管理模块实战2.1 分页查询的坑与优化做分页查询时我掉过三个坑表格数据不更新因为直接修改了数组要用[...data]展开运算符创建新引用分页器闪跳没处理好loading状态后来加了v-loading指令查询条件失效忘记在翻页时携带搜索参数完整的分页组件应该这样写template el-table :datatableData stylewidth: 100% el-table-column propname label姓名 / el-table-column propphone label手机号 / /el-table el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagecurrentPage :page-sizes[10, 20, 50] :page-sizepageSize layouttotal, sizes, prev, pager, next :totaltotal / /template script setup import { ref, onMounted } from vue import { getEmployeeList } from /api/employee const tableData ref([]) const currentPage ref(1) const pageSize ref(10) const total ref(0) const fetchData async () { const res await getEmployeeList({ page: currentPage.value, pageSize: pageSize.value }) tableData.value res.data.records total.value res.data.total } onMounted(fetchData) /script2.2 账号状态切换的骚操作启用禁用功能有个隐藏需求管理员账号不能被禁用。我当初没注意这个边界条件结果测试时把管理员锁死了最后只能去数据库改状态。现在我会这样写const handleStatusChange async (row) { if (row.username admin) { ElMessage.error(管理员账号不可禁用) return } try { await updateEmployeeStatus(row.id, row.status ? 0 : 1) fetchData() } catch (err) { row.status !row.status // 操作失败回滚状态 } }3. 新增/编辑的组件复用很多新手会分开写新增和编辑页面其实用动态表单就能搞定。关键技巧用optType区分操作类型编辑时通过路由参数获取ID表单校验规则共用script setup import { onMounted, ref } from vue import { useRoute } from vue-router const route useRoute() const form ref({ name: , phone: , // 其他字段... }) const rules { name: [{ required: true, message: 请输入姓名, trigger: blur }], phone: [ { required: true, message: 请输入手机号, trigger: blur }, { pattern: /^1[3-9]\d{9}$/, message: 手机号格式错误 } ] } onMounted(() { if (route.query.id) { // 获取编辑数据 loadEmployeeData(route.query.id) } }) /script4. 前后端联调秘籍和Java后端联调时这几个工具能救命axios拦截器统一处理401跳登录页Mock.js后端接口没好时前端自己造数据Chrome开发者工具看Network里请求参数对不对推荐这样封装axios// utils/request.ts import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_URL, timeout: 5000 }) service.interceptors.response.use( response { if (response.data.code ! 1) { ElMessage.error(response.data.msg || Error) return Promise.reject(response.data) } return response.data }, error { if (error.response.status 401) { router.push(/login) } return Promise.reject(error) } )有次我遇到个诡异问题分页查询返回的数据和请求参数对不上。后来发现是后端用了PageHelper但没正确配置前端传的pageSize被忽略了。这种问题就得前后端一起看日志才能定位。