做中小学家校服务系统最怕的不是写不出页面而是需求本身就一团乱麻。老师要发通知、家长要查成绩、领导要看数据三方角色各说各话最后产品改来改去把前端折腾得够呛。我自己经手过类似的模拟项目X用的就是 Vue 技术栈折腾下来最大的感受是技术难度其实全在项目管理和设计思路上框架本身反而只是工具。今天就拿“vue中小学家校服务系统设计与实现985k5”这个项目。注意后面那串字母数字就是开发代号叫多了顺口我就直接管它叫“985k5”。我会从需求拆解、技术选型、核心模块实现到联调部署完整复盘一遍这个系统的做法。写这些内容不是为了给你贴代码而是把每一步选择背后的原因讲清楚顺便把我在实际操作中踩过的坑、总结的经验一块儿放进去。正在做课程设计、毕业设计或者刚入职接手教育类后台项目的朋友这篇内容应该能帮你省不少弯路。1. 项目全貌与需求拆解做之前先想清楚谁来用1.1 家校服务系统到底解决什么问题中小学家校服务系统的核心说白了就是把学校和家长之间那些“信息不对称”的环节打通。以前老师通知事情得让学生带纸条回家家长签字再带回来一条消息往返要两三天。成绩出来之后家长想看还得专门跑到学校或者等期末开家长会。班主任想统计一下全班健康信息得挨个打电话、发微信然后手动做表格。这种系统的价值就在于把“通知、反馈、记录、统计”全部线上化。老师发一条通知家长手机上马上能收到。家长在系统里提交了反馈老师后台一目了然。学生的出勤、作业、成绩、体质健康数据都能沉淀成历史记录。学校领导想看整体情况不用等各年级汇总 Excel直接在系统里拉数据。如果你正准备做这类项目第一件事不是打开编辑器去写路由而是把用户分清楚。985k5这个系统我把用户分成四类家长端移动端 H5 为主查通知、看成绩、填反馈、和老师沟通。教师端PC 后台为主发通知、录成绩、查考勤、管理班级与作业。管理端PC 后台权限最高维护学校组织架构、管理师生账号、查看全校数据发布校级公告。超级管理员系统层面的配置包括角色权限分配、系统参数设置、数据备份与恢复。这四类角色虽然用同一个系统但功能和界面截然不同。如果把他们的需求混在一起做一个“万能页面”结果就是谁都觉得难用。1.2 需求优先级怎么定MVP 思维避免被需求淹没教育类系统有个非常容易踩的坑需求来源太多教务处说要做课表管理、德育处说要加操行评定、班主任说需要成绩分析图表、家长说想看食堂菜单。这些需求都是真的但不可能一次性全部做完。985k5 这个项目里我把需求分了 P0、P1、P2 三个优先级P0MVP 必做登录与权限控制、通知公告、班级通讯录、学生基础信息管理、成绩录入与查看。没有这些系统根本跑不起来也谈不上“家校服务”四个字。P1完整项目必须作业布置与提交、考勤记录、请假审批、留言沟通含教师回复、校级数据统计看板。P2加分项体检数据记录、心理测评问卷、食堂食谱展示、校车轨迹查询、荣誉表彰墙。这个优先级的划分逻辑一方面参考了真实学校的使用频率另一方面也考虑了一个学生在校期间能实际扎扎实实做完的程度。如果你是要交毕业设计建议 P1 做扎实P2 挑一两个亮点展示千万不要十全大补什么都想要。2. 技术选型与架构设计为什么选择 Vue 技术栈2.1 框架选型Vue 生态为什么适合这种项目985k5 项目的前端选型非常明确Vue 3 Vite Vue Router Pinia Element Plus。这套组合目前在中小型管理系统里非常能打而且理由很充分。首先Vue 3 的组合式 APIComposition API特别适合需要按功能组织代码的场景。比如“成绩管理”这个模块涉及教师端录入、家长端查看、管理端统计三套界面逻辑差异很大。组合式 API 可以把同一个功能的数据请求逻辑、状态处理、业务方法放到一起比 Vue 2 的 Options API 按 data/methods/computed 拆分要清晰得多。其次是 Element Plus 组件库。家校系统本质上是一个典型的中后台管理系统表格、表单、弹窗、树形控件、日期选择器这类组件几乎无处不在。Element Plus 做得足够成熟又是在 Vue 3 生态里社区最活跃的组件库出了问题随便一搜就能找到解决方案。别小看“搜得到答案”这件事遇到底层问题的时候冷门框架能把人折磨疯。Vite 作为构建工具也是顺理成章的选择。中小学项目通常开发周期紧页面数量又多Vite 的冷启动速度和热更新体验比旧时代的 Webpack 配置省了太多时间。我前后对比过同样几十个路由的工程Vite 的启动基本是秒级Webpack 需要磨蹭好一阵子。对于需要频繁迭代接口联调的项目来说这个差距会直接影响开发效率。2.2 整体架构前后端分离的组织方式985k5 采用标准的前后端分离架构整个系统分成三个独立工程前端主工程Web教师端 管理端运行在 PC 浏览器负责日常管理与数据操作。家长端 H5 工程Mobile基于同一套 Vue 技术栈但采用移动端适配方案运行在手机浏览器方便家长使用。后端接口服务这里不限定语言可以用 Java Spring Boot也可以用 Node.js甚至 Python FastAPI。重点是把 RESTful API 设计好。这种架构下两个前端工程共享同一套后端接口。你可能想问为什么不做一个自适应网站同时兼容 PC 和手机那是省事但不好用。家长的操作极其简单打开就是看通知、点已读、查成绩移动端页面要的是大按钮、大字、极简流程。教师端要处理表格、批量操作、统计数据需要有足够的屏幕空间。强行用一个页面适配两种截然不同的使用场景体验必然打折扣。共享后端接口这一点建议在项目一开始就做好 API 规范。我用的是 OpenAPISwagger来统一管理接口文档前后端并行开发时前端可以按接口文档直接 mock 数据不用死等后端出活儿。2.3 工具链搭配与协同管理除了核心框架工具链的选型会直接影响开发节奏。状态管理用 PiniaVuex 4 在 Vue 3 里也能用但 Pinia 设计更简洁没有 mutation 那一层直接改 state配合组合式 API 非常顺手。这个系统里的全局状态不算复杂主要是当前登录用户信息、权限标识、系统全局配置用 Pinia 管理就够了。HTTP 请求用 Axios拦截器统一处理 Token 注入、错误提示、登录过期跳转这些在教育系统里几乎是标配需求。代码管理用 Git 独立的 develop 分支流程哪怕是一个人开发也建议不要直接在 main 分支上乱推。养成 feature 分支开发、合并前 review 的习惯后面如果需要多人协作或答辩演示复杂度会友好得多。3. 核心功能模块设计与实现细节3.1 角色权限模型怎么避免家长看到老师的管理入口权限设计是整个系统里最需要提前规划的部分因为它决定路由、菜单、按钮、接口四个层面的控制逻辑。我在985k5里用的是RBAC模型也就是基于角色的访问控制。具体来说用户登录后后端根据用户身份返回两个关键数据角色标识和权限点列表。前端拿到这些数据做三件事第一动态生成路由。前端提前定义好所有模块的路由表但只有当前角色权限点覆盖到的模块才被注册进路由实例。没有权限的页面直接访问也进不去因为路由压根不存在。第二动态渲染菜单。侧边栏菜单是根据权限点过滤后的路由配置生成。家长端返回的路由只有“首页、消息、我的”这类移动端页面教师端返回的才有“班级管理、成绩录入、作业布置”等入口。第三按钮级别控制。比如成绩模块“录入成绩”按钮只有教师角色才显示“修改系统参数”这个按钮全校管理员之外的人根本看不到。具体做法是封装一个v-permission自定义指令在按钮上写上权限标识指令内部判断当前用户是否有权限没有就直接移除这个 DOM 元素。提示权限标识的命名要统一、可读。我习惯用模块:动作的格式比如score:input、notice:delete、user:assign。后端给到的权限标识也按这个格式来前后端校验用的是同一套字符串不会出现前端叫scoreInput、后端叫INPUT_SCORE这种对不上的尴尬。3.2 通知公告模块已读回执与发布范围的设计通知公告是家校系统里最高频的功能但它比看起来要复杂得多。第一版原型我以为就是“管理员发一条消息所有人能看到”结果被学校反馈一句话就点醒了——“我们发通知必须要知道家长看没看见”。这个需求直接催生了已读回执功能。已读回执的实现有两种思路方案 A发通知时给所有接收人生成一条记录。通知表存通知内容通知接收表存 (通知 ID, 用户 ID, 是否已读)。家长读通知时把对应记录的已读状态置为 true。方案 B不预先生成记录访问时动态检查。只在通知列表里查未读做法是缓存已读通知的 ID 集合对比得出未读列表。实际做的时候我采用了方案 A原因是数据量可控且逻辑直观。一个通知发给全校两三千人接收表一次性插入几千条记录对数据库来说完全不是压力。但教师端“只看未读家长”的筛选、单项提醒催读功能在方案 A 下就是一个 where 查询的事逻辑非常简单清楚。发布范围这块也值得展开。通知的可见范围不能是简单的“全员”我设计成四种范围类型全校发布所有用户可见。年级范围内发布比如只发给全体初二年级。班级范围内发布只发给某一个班级或几个班级。定向发送精确到某个或某几个学生家长。这四种范围在数据结构上有不同的表达方式我在实现时用了一个target_type字段加一个target_ids字段。target_type表示范围类型school/grade/class/orienttarget_ids存对应的 ID 列表逗号分隔。前端发布通知时根据选择的类型传参后端负责解析并把通知写入对应的接收人记录。3.3 成绩管理模块横向表格与权限缺口的处理成绩管理是教师端最核心的模块也是我调试时间最长的一个功能。需求本身不算难教师选择班级、选择考试录入各科成绩家长端看到分数和排名。但到了实现层面细节不少。第一是数据结构。我采用了“考试表 考试成绩表”的两层结构。考试表存考试名称、年级、考试类型月考/期中/期末、考试时间。考试成绩表存学生 ID、考试 ID、科目、分数。科目到底做成一个单独的表还是在一张成绩表里用字段区分这个纠结过。最后为了保护灵活性决定用“成绩表 科目字段”的方案因为中小学的考试科目基本固定一张宽表反而查询效率高。第二是教师的“录入窗口”。真实场景里录入成绩往往不是班主任一个人干的。语文老师要录入语文成绩数学老师录入数学成绩他们各自登录后只能看到自己所教科目的录入界面。所以在成绩录入接口设计时必须让后端从登录态里解析出教师的工作岗位与实际任课信息再决定他能操作哪些科目不能单纯由前端传入科目参数。第三是家长端的排名显示。家长到底适不适合看到排名这个教育行业的理念还有争议。但从系统设计角度我放了一个开关show_rank配置项由学校管理员决定当前考试类型是否需要展示排名。需求实现的成本很低但未来遇到不同的理念主张时不会被绑死。3.4 作业与考勤模块贴近校园真实场景的细节作业模块的流程是“布置 — 回传 — 批阅”。教师端可以在线布置作业并选择学科、班级、截止时间。学生端目前是家长代看可以看到作业详情和截止日期。真正的学生在线提交作业在小学生场景里不现实——作业往往是纸质本子所以系统只承担“布置与提醒”的作用不在线收作业。这一点可以说是我在理解家校服务边界时的一个重要心得系统不要试图替代线下的教学行为它只负责把线下的动作高效地组织起来。做在线收作业、在线批改这种重应用就偏离了“家校服务”的定位会把自己拖入一个巨大的复杂度黑洞。考勤模块比我想象的更需要细心。因为“缺勤”的原因五花八门病假、事假、迟到、早退、旷课、外出活动。我建了一张attendance_record表字段有学生、班级、日期、考勤类型、具体时段上午/下午/晨读/课后服务、备注。最重要的是考勤异常的数据会触发一条家长通知——孩子到点没到校家长收到系统推送。这个功能是家长们评价最高的功能也让我意识到通知和考勤组合的联动价值。4. 前端工程化实践目录结构、组件封装与状态管理4.1 前端目录结构怎么样组织代码才不吵架985k5 的前端目录结构直接决定了后面所有模块的开发节奏。我最终确定的结构大致是这样src/ api/ assets/ components/ composables/ directives/ layouts/ router/ stores/ styles/ utils/ views/ teacher/ admin/ common/这套结构的核心思想是按职责分目录按业务域分 views。api目录下按领域再拆文件比如score.js、notice.js、attendance.js每个文件导出对应的接口函数组件中永远不直接写axios.get(...)这种散装请求。composables是 Vue 3 组合式 API 的专属目录。比如usePagination.js封装了表格分页逻辑useFormModal.js封装了弹窗表单的打开关闭提交过程。把这些逻辑抽出来之后不同模块复用的时候只需要几行代码接入页面代码立刻清爽很多。如果多人协作这套结构尤其重要。每个开发者分管两个业务域改代码只动自己的views/xxx和api/xxx.js几乎不会产生文件级别的冲突。4.2 接口层封装思路统一请求、错误处理与上传下载一个教育类管理系统接口层几乎决定了前后端联调的质量。因为项目有 PC 端管理后台和移动端 H5 两个前端接口封装我做得比较重专门抽了一层。核心是 Axios 实例的创建。在这里面配置基础 URL根据环境变量区分开发、测试、生产。超时时间统一设置 15 秒。请求拦截器从 localStorage 取出 Token放到 Authorization 头里。响应拦截器后端接口协议约定好返回结构是{ code, message, data }。当code 0时视为成功返回data否则统一提示message或者按特定错误码处理。尤其遇到401直接清空登录态、跳转登录页。接口文件里的每个函数都加上了 JSDoc 注释标注清楚参数、返回值、用途。做这个项目的时候我会刻意强调一件事接口层烂了整个项目都跟着受罪。宁可在这层多花点时间后期联调能省出十倍时间。文件上传也是一个常见场景我封装了一个通用的uploadFile方法调用后端预签名的上传接口生成临时凭证前端拿到凭证直传对象存储再回填文件 URL 给业务表单。这样既减轻了应用服务器压力又能享受对象存储自带的 CDN 加速。4.3 状态管理哪些信息必须放全局哪些该留在组件内部写 Pinia 之前我是有明确原则的只有跨页面、跨组件共享且频繁使用的数据才放进全局状态。那些一次性的、只影响单个组件的数据直接放在组件内部用ref管理就行。在 985k5 里我实际只建了三个 StoreuserStore当前登录用户信息、角色、权限点、可管理的班级列表。这些数据几乎所有页面都要用。appStore系统级 UI 配置比如侧边栏折叠状态、主题色、语言。移动端和 PC 端分别读取刷新后还能恢复。notificationStore未读消息数量顶部导航的红点数字。登录后拉取一次之后轮询接口更新。成绩列表、通知列表这类数据千万别塞进 Store。哪怕多个班级页面都要用成绩数据我也选择“按需请求一遍”而不是缓存共享。因为成绩数据的时效性很强教师改一个分数其他页面马上要反映出来。全局缓存这种优化等真的有性能瓶颈再引入也来得及。5. 关键页面实操与代码实现复盘5.1 登录页与权限路由从拿到 Token 到渲染首页的完整链路登录页在整个系统里看起来最简单但它的逻辑链路其实贯穿了系统的所有模块。985k5 的登录流程是这样的用户输入账号密码前端把密码用 RSA 公钥加密后再传给后端避免密码在网络中以明文传递。后端校验通过后返回一个 Access Token 和 Refresh Token。前端把两个 Token 存到 localStorage同时用用户信息调用/user/info接口拿到当前用户的详细信息、角色、权限点。拿到权限点之后前端调用generateRoutes(permissions)函数动态拼接出当前用户可见的路由表用router.addRoute()注册进去。做完这些才允许跳转到首页。这个流程里我有几个细节做得比较讲究Token 过期前的静默刷新。我在 Axios 拦截器里判断 Access Token 剩余有效期低于 5 分钟就用 Refresh Token 去换新的。路由守卫里判断“是否已初始化权限”。没有权限就到处跳转会导致页面白屏这个坑我早期踩过多次后来总结出一条铁律权限初始化过程必须保证幂等且要处理好并发请求。登录页本身的设计移动端家长端用的是手机号短信验证码登录PC 后台用账号密码登录。这里我给一个小建议如果毕业设计或者实际项目只能做一种登录方式优先做手机验证码。因为中小学校长和老师的密码管理能力参差不齐验证码不仅安全还省掉了“忘记密码”的大量维护成本。5.2 动态路由与菜单渲染从配置到激活高亮动态路由在 Vue Router 4 里的实现关键代码逻辑大概是这样的// 路由配置示例 const constantRoutes [ { path: /login, component: () import(/views/login/index.vue) }, { path: /, component: Layout, redirect: /dashboard, children: [...] } ]; const asyncRoutes [ { path: /score, component: Layout, name: ScoreManagement, meta: { title: 成绩管理, icon: score, permissions: [score:view] }, children: [ { path: list, component: () import(/views/teacher/score/list.vue), meta: { title: 成绩列表, permissions: [score:view] } }, { path: input, component: () import(/views/teacher/score/input.vue), meta: { title: 成绩录入, permissions: [score:input] } } ] } ]filterAsyncRoutes函数递归遍历异步路由检查路由 meta 里的permissions数组是否与当前用户的权限点有交集有就保留没有就过滤掉。路由表过滤完之后再router.addRoute(route)逐条注册。这里有一个特别容易忽略的问题菜单高亮。当 URL 是/score/list时侧边栏的“成绩管理”子菜单要展开并高亮。Vue Router 的route.matched会自动给出匹配链菜单组件根据matched最后一级的path来判断当前激活项。我用的是:default-activeactiveMenu配合watch监听路由变化。另外组件里跳转时记得name别乱写否则菜单高亮很容易错位。5.3 通知发布界面多角色选择器的组件化设计通知发布界面是教师端用得最多的表单页面之一。包含标题、正文富文本、发布范围、是否置顶、是否需要家长回执。发布范围的多选器我封装成了TargetPicker组件。这个组件的 props 接受学校的年级和班级树形数据内部用 Element Plus 的el-cascader实现级联选择。第一级是年级第二级是班级第三级是学生。如果选择整个年级就自动带上该年级所有班级。选择整个班级就自动带上该班级所有学生。template el-cascader v-modelselectedTargets :optionstargetOptions :props{ multiple: true, checkStrictly: true } filterable clearable placeholder请选择接收范围 changehandleTargetChange / /template这里有一个我反复测试过的坑el-cascader的checkStrictly属性。默认情况下父节点和子节点联动选中父节点会自动选全部子节点。但在发布范围里选中“初二年级”时我还需要展示该年级下面具体包含哪些班级而不是直接生成所有人的接收记录。我最终设置checkStrictly: true允许只选中父节点后端拿到grade-2这样的 ID 后再解析成具体的用户列表。5.4 家长端首页与消息推送移动端体验的轻量化设计家长端 H5 的首页是一个聚合页从上到下依次是当前孩子的信息卡片、未读通知数、今日作业、最近成绩、快速入口。为了减少家长端请求次数我把首页聚合数据做成一个独立的接口/h5/home/summary后端一次性返回所有板块需要的数据避免前端五次并发请求。移动端的适配我用的方案是viewport加postcss-px-to-viewportUI 稿按 375px 宽度设计构建时自动把 px 转成 vw 单位。这种方案比 rem 方案简洁因为不用动态计算根字号。不过要注意边框和字体在转换时可能出现细微差异色值和 1px 的细节建议在真机上过一遍。消息推送这块因为项目需要轻量化我没上重量级的 WebSocket 方案而是用轮询 服务端标记的方式。App 端或者 H5 页面每隔 30 秒调用一次未读接口有新的未读就刷新顶部红点。这个轮询方案对于中小学校几百个并发用户完全够用而且实现难度和运维成本几乎为零。如果你未来要支持同时在线几万人再考虑引入实时通道也不迟。6. 开发环境、联调部署与安全加固6.1 环境变量与接口切换开发、测试、生产三套配置985k5 的系统前端有多个环境环境变量管理不能靠手动改代码。我用.env.development、.env.test、.env.production三个文件加上 Vite 的import.meta.env来区分# .env.development VITE_APP_BASE_URLhttp://127.0.0.1:8080/api VITE_APP_ENVdevelopment项目里有一个配置文件统一读取所有环境变量像接口地址、上传地址、文件预览地址这些基础配置全部从环境变量中取。不要在代码里硬编码http://192.168.1.100:8080这样的地址否则换环境联调、打包部署时满项目搜 IP 的滋味真的难受。构建脚本也做了区分{ scripts: { dev: vite, build:test: vue-tsc --noEmit vite build --mode test, build:prod: vue-tsc --noEmit vite build --mode production } }6.2 打包部署与 Nginx 配置路由 history 模式的陷阱这个系统的前端部署我放在了 Nginx 上。打包之后静态文件直接扔到服务器目录Nginx 配置里最关键的一项是处理 Vue Router 的 history 模式。由于前端路由是 history 模式刷新页面时浏览器会向服务器发起实际的路径请求比如/score/list如果 Nginx 没有对应配置就会直接 404。解决办法是配置 fallbacklocation / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }try_files指令让所有找不着的路径都回退到index.html由前端路由接管。另外注意接口请求要通过 Nginx 反向代理转发到后端服务可以这样配置location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }每次部署前我都会在本地先执行一次完整构建检查是否有 TypeScript 报错、路由懒加载分包异常然后再上传到服务器。临时抱佛脚改一个文件重新构建一把是很容易引入低级问题的操作方式。6.3 安全加固与数据防泄露家校系统特别要注意的门槛家校系统涉及未成年人个人信息安全性容不得马虎。985k5 里我做了几层安全加固密码加密传输登录密码使用 RSA 公钥加密后端用私钥解密后再做校验。这一步能避免密码在中间环节裸奔。敏感字段脱敏家长手机号在列表页默认打码只有授权角色才能查看完整号码。学生身份证号这类字段原则上不在前端展示。接口权限校验后端接口必须校验真实身份。比如一个普通家长通过模拟请求直接访问教师端接口后端必须返回 403不能只靠前端隐藏按钮。敏感操作审计日志老师批量删除成绩、管理员修改用户角色这类关键操作都会记录操作人、时间、操作内容。真出了问题能在审计日志里找到现场。做过教育项目的朋友肯定知道现在学校信息化的数据安全要求越来越严格。很多部署在校内的系统还会要求数据库不能对外开放公网访问只允许内网网段访问。这个在项目规划阶段就得问清楚部署环境来不及在设计完系统之后才去考虑。6.4 常见问题速查表近期联调记录里的高频问题下面这份问题速查表都是从我自己实际运行项目时整理出来的。为避免空对空我把问题、原因和解决办法一起列出来问题描述常见原因解决办法登录成功后刷新页面就跳回登录页Token 存到了 Pinia刷新后状态丢失Token 必须持久化到 localStorage并在应用初始化时重新读取恢复动态路由注册后页面白屏或 404addRoute注册时机发生在实例初始化之后且同一路由重复添加用router.hasRoute()判断是否已注册再决定是否addRoute后台上传图片后预览地址打不开后端返回的是内网地址外部网络无法访问或没有配置文件服务映射统一使用对象存储的公开 CDN 地址或配置专门的静态资源域名移动端 H5 页面在部分安卓机型上字体渲染模糊字体小于 12px 或桌面端专用字体在移动端未适配全局设置根字号 16px内容字体不低于 14px特殊标题用媒体查询微调分页表格数据窜页切换页码时没有重置当前筛选条件后端分页参数从 0 或 1 起点不一致锁定分页请求参数标准格式切换筛选条件时统一重置 current1教师端界面菜单闪烁或默认展开异常el-menu的:default-openeds与default-active在路由变化时没有联动更新用 computed 监听当前路由把default-openeds计算成基于菜单 key 的数组7. 从985k5延伸出的改进思路与经验心得这个系统做完之后给我的最大感受是真正花时间的不是敲代码而是理解业务、规划权限、设计表结构、调试部署。在一个真实的开发周期里“写页面”可能只占了四分之一的时间其余时间几乎都花在需求确认、前后端联调和排查环境问题上了。如果让我说说这个项目还能怎么延伸我觉得可以加一个“班级圈子”功能类似于班级内部的轻量社交空间家长可以上传孩子在校活动的照片老师可以在线查看并点评。这种功能在技术上没有太大难度但对家校服务的情感连接价值提升非常明显属于性价比很高的扩展。另外一个方向是把移动端 H5 封装成小程序。现在家长使用手机习惯里打开小程序比打开浏览器方便得多而且小程序自带订阅消息能力通知触达率会显著提高。技术上其实只用把这套 Vue 工程迁移到 uni-app改造成本不会太大。最后再分享一个小技巧。如果你在做一个前端项目而经常被各种乱七八糟的需求打断试着在每个迭代周期结束时把当前项目里你做过的最麻烦的那个问题复盘成一份文档。哪怕只是三五百字记录问题和解决思路。等到答辩或者面试时这就是比“我做过一个系统”更有说服力的真实素材。985k5 这个项目做完我自己的心得是系统是做给用户用的代码是做给未来的自己看的。把目录理清楚、把命名规范统一、把关键注释写到位其实是给自己节省了最多的时间。