项目名称: 高校学生毕业管理系统(Web 端)
项目描述: 该系统面向高校教务处与二级学院,覆盖学生毕业资格审查、学位申请审批、论文管理与答辩安排、就业去向登记与统计等全流程。原系统基于 Vue2 + Vuex 构建,随着业务模块增至 40+ 页面,维护成本高、构建慢、类型缺失严重,遂启动 Vue3 迁移重构。
技术栈: Vue 3 + Composition API + Pinia + Vue Router 4 + Vite + TypeScript + Element Plus + ESLint
工作内容:
主导整体迁移方案制定,按模块分批迁移,采用 Vue3 + Composition API 重写核心业务页面,将 Options API 中分散在 data / methods / watch 的逻辑按业务领域聚合为 useStudent、useGraduation、useThesis 等组合式函数,逻辑复用性显著提升,同类业务代码量减少约 35%。
将状态管理从 Vuex 迁移至 Pinia,移除 mutation 层,直接在 action 中异步处理,结合 TypeScript 推导 store 类型,消除了原项目中大量的 any 与类型断言,接口调用层的类型覆盖率从 0 提升至 85% 以上。
构建工具由 Webpack 4 切换为 Vite,利用依赖预构建与 ESM 按需加载,冷启动时间从 45s 降至 4s 左右,热更新从秒级降至毫秒级,大幅改善开发体验。
针对毕业资格审查、就业统计等长列表页面,利用 Vue3 的 Fragment 与 v-memo 减少不必要的组件重渲染,配合虚拟列表方案,万级学生数据滚动帧率稳定在 55fps 以上。
逐步将 Element UI 替换为 Element Plus,统一升纷新版表格、表单组件,复用原有业务逻辑,保证迁移期间线上系统不受影响。
项目成果: 迁移后系统首屏加载时间由 3.2s 优化至 1.1s,构建产物体积减小约 42%,开发冷启动提升 10 倍以上。新框架下后续新增"论文盲审""就业数据大屏"等模块的开发周期缩短约 30%。