这门课解决什么工作场景
前端开发岗位目前的竞争核心，早已不是只会写 CRUD 或抄官方 Demo，而是能否独立交付一个业务逻辑完整、技术栈主流的商业级项目。招聘类 App 是前端面试中的高频考点，它涵盖了用户端与商家端的双端交互、状态管理、组件封装以及构建优化等核心场景。
本课程基于 Vue3 + Vite 技术栈，以 Vant-UI 为移动端解决方案，还原了一个完整的双端招聘应用开发流程。它解决的核心痛点是：初学者手中缺乏能够写在简历上、且在面试中能讲清楚架构设计的项目经历。课程采用业务驱动模式，从项目初始化到最终部署，覆盖研发、测试全链路，帮助你填补“懂语法”与“能开发”之间的鸿沟。
适合什么基础，建议先看哪几块
本课程适合具备 JavaScript 基础、了解 Vue2 基本用法，或已自学完 Vue3 基础语法但缺乏实战经验的开发者。如果你从未接触过 Vue，建议先补齐 Composition API、响应式原理等基础概念再介入本项目，否则在理解 Pinia 状态管理和 VueUse 工具库时会较为吃力。
在学习路径上，建议优先关注以下几个模块：首先是项目架构搭建，理解 Vite 配置与目录规范，这是后续高效开发的基础；其次是核心业务组件的封装，特别是招聘列表、详情展示等通用组件的重用逻辑；最后是双端数据的交互与状态同步，这是理解 Pinia 在实际场景中应用的關鍵。不要跳步阅读代码，需结合 IDE 亲手复现每一个功能点。
学完能独立做什么，资料怎么配合练习
完成本课程后，你将能够独立使用 Vue3 生态完成移动端 WebApp 或 H5 应用的开发。具体能力包括：熟练使用 Vant-UI 快速构建符合移动端规范的界面；利用 Pinia 集中管理复杂页面状态；运用 VueUse 简化常用逻辑复用；并掌握 Vite 环境下的工程化配置与调试技巧。
资料的配合使用至关重要。建议采用“边看边做”的策略：暂停视频后，尝试自行实现当前功能，仅在被卡住时查阅课程代码。对于提供的项目源码，不要直接复制粘贴，而应逐行阅读其逻辑结构，对比自己的代码找出差异。同时，建议在学习结束后，基于现有项目尝试扩展一个非课程内的功能（如增加消息推送或修改主题色），以此检验自己是否真正掌握了该项目的开发范式。
课程目录
├── 1-课程概览（知彼知己，百战不殆）/ │ ├── [5.7M] 1-1 为什么这门课值得你学习？ │ ├── [ 12M] 1-2 你能收获什么体量的项目作品？ │ ├── [4.3M] 1-3 你需要具备什么样的知识储备？ │ ├── [4.3M] 1-4 你能提升哪些能力以及技巧？ │ └── [3.1M] 1-5 学习建议与学习目标 ├── 2-开发前的准备工作（磨刀不误砍柴工）/ │ ├── [ 12M] 2-1 本章概览：带着目标学习 │ ├── [6.7M] 2-2 项目需求分析：需求解决方案设计 │ ├── [ 11M] 2-3 业务逻辑分析：业务逻辑设计 │ ├── [7.7M] 2-4 技术选型分析：技术解决方案设计 │ └── [1.1M] 2-5 本章总结：温故知新 ├── 3-开发环境初始化（工欲善其事必先利其器）/ │ ├── [2.2M] 3-1 本章概览：带着目标学习 │ ├── [6.1M] 3-2 vite+vue3+ts构建项目环境 │ ├── [9.8M] 3-3 集成pinia：新一代状态管理插件 │ ├── [3.2M] 3-4 集成VueUse：Composition API常用工具集(JS API响应技术) │ ├── [2.5M] 3-5 集成Vant 3UI：轻量的移动端组件库 │ └── [861K] 3-6 本章总结：温故知新 ├── 4-项目框架搭建（掌握可复用的技术解决方案）/ │ ├── [2.6M] 4-1 本章概览：带着目标学习 │ ├── [9.2M] 4-2 基于vscode编译器里Vetur和volar插件说明 │ ├── [ 17M] 4-3 企业项目模块化结构设计：页面结构梳理 │ ├── [ 24M] 4-4 企业项目模块化结构设计：页面结构创建 │ ├── [ 50M] 4-5 企业项目模块化结构设计：页面间的路由跳转设计 │ ├── [ 41M] 4-6 API接口调用设计：前后端分离技术解决方案设计与实现 │ ├── [ 30M] 4-7 企业项目模块化结构设计：静态UI资源与适配设计 │ ├── [8.3M] 4-8 公共组件设计：公共组件梳理 │ ├── [ 35M] 4-9 公共组件设计：底部导航公共组件 │ ├── [ 81M] 4- 10 公共组件设计：任务列表公共组件 │ ├── [ 55M] 4- 11 公共组件设计：合约列表公共组件 │ ├── [ 45M] 4- 12 公共组件设计：消息列表公共组件 │ ├── [ 88M] 4- 13 公共组件设计：人才列表公共组件 │ ├── [ 58M] 4-14 登录及权限控制：登录页面组件开发与实现-1 │ ├── [ 22M] 4-15 登录及权限控制：登录页面组件开发与实现-2 │ ├── [ 32M] 4-16 登录及权限控制：登录页面组件开发与实现-3 │ ├── [ 81M] 4-17 登录及权限控制：登录页面组件开发与实现-4 │ ├── [ 30M] 4-18 登录及权限控制：登录页面组件开发与实现-5 │ └── [2.8M] 4- 19 本章总结：温故知新 ├── 5-人才端-&任务&基础模块（掌握Vue开发组件的技巧）/ │ ├── [5.3M] 5-1 本章概览：带着目标学习 │ ├── [ 71M] 5-2 基于组件化思想拆分任务页组件 │ ├── [ 65M] 5-3 城市列表：设计与实现城市列表页组件及数据渲染 │ ├── [ 29M] 5-4 城市切换：城市切换功能逻辑设计与实现 │ ├── [ 33M] 5-5 Banner图：基于Swiper开发常见的Banner特效 │ ├── [ 65M] 5-6 职位类型：设计与实现职位分组列表组件及数据渲染 │ ├── [ 24M] 5-7 职位选择：职位选择功能逻辑设计与实现 │ ├── [ 67M] 5-8 筛选页：设计与实现筛选项组件及数据渲染 │ ├── [ 23M] 5-9 筛选条件：筛选条件切换功能逻辑设计与实现 │ ├── [125M] 5-10 任务列表分页、下拉刷新、加载更多功能实现-1 │ ├── [ 17M] 5-11 任务列表分页、下拉刷新、加载更多功能实现-2 │ ├── [ 59M] 5-12 任务详情页：基于组件化思想设计与实现详情页组件及数据渲染-1 │ ├── [110M] 5-13 任务详情页：基于组件化思想设计与实现详情页组件及数据渲染-2 │ ├── [ 92M] 5-14 任务来源页：基于组件化思想设计与实现来源页组件及数据渲染 │ └── [5.1M] 5- 15 本章总结：温故知新 └── 6-人才端-&任务&搜索模块（掌握通用型复杂搜索功能的解决方案）/ ├── [4.6M] 6-1 本章概览：带着目标学习 ├── [ 69M] 6-2 搜索页：常见复杂搜索功能的逻辑设计与实现 ├── [ 29M] 6-3 历史搜索：历史搜索记录&删除功能的逻辑设计与实现 ├── [ 23M] 6-4 热门搜索：基于组件化思想设计与实现热词组件及数据渲染 ├── [ 64M] 6-5 搜索结果：基于组件化思想设计与实现搜索列表组件及数据渲染 └── [4.8M] 6-6 本章总结：温故知新 ├── 7-人才端-&合约&模块（掌握Vue渲染多状态数据的技巧）/ │ ├── [4.1M] 7-1 本章概览：带着目标学习 │ ├── [ 33M] 7-2 合约列表：基于Vue实现常见的Tab切换组件 │ ├── [ 51M] 7-3 多状态合约列表数据渲染逻辑设计与实现 │ ├── [ 34M] 7-4 引用vant3下拉刷新第一次不出现加载状态解决方案 │ ├── [ 46M] 7-5 多状态合约详情数据渲染逻辑设计与实现-1 │ ├── [ 55M] 7-6 多状态合约详情数据渲染逻辑设计与实现-2 │ ├── [ 68M] 7-7 多状态合约进度数据渲染逻辑设计与实现 │ ├── [ 60M] 7-8 基于指令的方式实现全局注册：避免操作项重复执行 │ └── [7.3M] 7-9 本章总结：温故知新 ├── 8-人才端-&消息&模块（掌握轮询在企业项目中的巧妙用法）/ │ ├── [5.1M] 8-1 本章概览：带着目标学习 │ ├── [ 27M] 8-2 通知列表：新消息通知数量红点技术方案设计与实现 │ ├── [ 42M] 8-3 通知列表：多种类型系统消息列表数据渲染逻辑设计与实现 │ ├── [ 19M] 8-4 通知详情：多种类型系统消息处理技术方案设计与实现 │ ├── [ 43M] 8-5 对话列表：会跳动的消息对话列表逻辑设计与实现 │ ├── [ 70M] 8-6 对话详情：基于轮询方式通信技术实现消息对话-1 │ ├── [ 60M] 8-7 对话详情：基于轮询方式通信技术实现消息对话-2 │ ├── [ 60M] 8-8 对话详情：常用语选择列表功能设计与实现-1 │ ├── [ 26M] 8-9 对话详情：常用语选择列表功能设计与实现-2 │ ├── [ 54M] 8- 10 对话详情：常用语添加功能设计与实现 │ ├── [ 73M] 8-11 对话详情：常用语管理功能设计与实现-1 │ ├── [ 52M] 8-12 对话详情：常用语管理功能设计与实现-2 │ ├── [ 33M] 8- 13 对话详情：常用语emoji符号表情功能设计与实现 │ ├── [ 24M] 8- 14 对话详情：对话聊天消息发送逻辑实现 │ └── [7.1M] 8- 15 本章总结：温故知新 ├── 9-人才端-&我的&基础信息模块（掌握Vue开发文本回填功能的技巧）/ │ ├── [4.7M] 9-1 本章概览：带着目标学习 │ ├── [ 43M] 9-2 我的主页基础模块设计与开发-1 │ ├── [ 42M] 9-3 我的主页基础模块设计与开发-2 │ ├── [ 68M] 9-4 我的主页基础模块设计与开发-3 │ ├── [ 15M] 9-5 我的主页基础模块设计与开发-4 │ ├── [ 49M] 9-6 个人信息：基于数据回填实现个人信息填写与提交-1 │ ├── [ 52M] 9-7 个人信息：基于数据回填实现个人信息填写与提交-2 │ ├── [ 41M] 9-8 个人信息：基于数据回填实现个人信息填写与提交-3 │ ├── [ 75M] 9-9 个人信息：基于数据回填实现个人信息填写与提交-4 │ ├── [ 31M] 9-10 个人信息：基于数据回填实现个人信息填写与提交-5 │ ├── [ 33M] 9- 11 设置：基于组件思想实现常用项组件 │ ├── [ 19M] 9- 12 设置：退出登录功能方案设计与实现 │ ├── [ 33M] 9- 13 我的收藏：任务收藏列表数据渲染实现 │ ├── [3.1M] 9- 14 收藏详情：基于组件复用逻辑快速实现任务收藏详情页 │ └── [6.6M] 9- 15 本章总结：温故知新 ├── 10-人才端-&我的&任务管理模块（掌握Vue+Vant3综合应用技巧）/ │ ├── [4.8M] 10-1 本章概览：带着目标学习 │ ├── [ 40M] 10-2 基于组件化设计与实现账户基础模块组件及数据渲染 │ ├── [ 23M] 10-3 基于组件化设计与实现介绍说明页 │ ├── [ 25M] 10-4 基于Vue实现常见的Tab切换特效 │ ├── [ 36M] 10-5 多状态数据列表渲染逻辑设计与实现 │ ├── [ 55M] 10-6 基于vant3的form表单实现金额提现功能-1 │ ├── [ 22M] 10-7 基于vant3的form表单实现金额提现功能-2 │ └── [4.4M] 10-8 本章总结：温故知新 ├── 11-人才端-&我的&简历模块（掌握Vue+Vant3+VueUse综合应用）/ │ ├── [5.5M] 11-1 本章概览：带着目标学习 │ ├── [ 23M] 11-2 简历模板页组件设计与实现 │ ├── [ 13M] 11-3 简历基本信息模块：基础模块组件设计与实现 │ ├── [ 23M] 11-4 简历基本信息模块：组件化引用个人信息填写功能 │ ├── [ 43M] 11-5 简历基本信息模块：基于Pinia设计简历详情数据渲染 │ ├── [ 41M] 11-6 个人优势模块：新窗口数据回填功能设计与实现 │ ├── [ 38M] 11-7 求职意愿模块：基于组件复用思想便捷实现职位类型设置功能 │ ├── [ 55M] 11-8 求职意愿模块：基于vant3的Checkbox实现服务类型设置功能 │ ├── [ 22M] 11-9 求职意愿模块：基于vant3下拉列表设计与实现服务价格设置功能 │ ├── [ 34M] 11- 10 求职意愿模块：基于多项选择实现数据提交设计与实现 │ ├── [ 69M] 11-11 擅长技能模块：基于vant3自定义技术设计与实现技能设置功能-1 │ ├── [ 38M] 11-12 擅长技能模块：基于vant3自定义技术设计与实现技能设置功能-2 │ ├── [ 34M] 11-13 擅长技能模块：基于vant3自定义技术设计与实现技能设置功能-3 │ ├── [ 64M] 11- 14 工作经历模块：基础项组件开发及编写功能设计与实现 │ ├── [ 15M] 11-15 工作经历模块：基于组件复用思想便捷实现职位类型设置功能 │ ├── [ 78M] 11- 16 工作经历模块：时间选择组件逻辑设计与实现 │ ├── [ 16M] 11- 17 项目经历模块：基础模块开发及编写功能设计与开发 │ ├── [ 28M] 11- 18 项目经历模块：时间选择组件逻辑设计与实现 │ ├── [ 27M] 11- 19 教育经历模块：基础模块开发及编写功能设计与开发 │ ├── [ 23M] 11-20 教育经历模块：基于下拉列表实现学历设置功能设计与开发 │ ├── [ 31M] 11-21 教育经历模块：基于vant3的DatetimePicker的选择器 │ ├── [ 28M] 11- 22 简历预览模块：基于多组件通用类型实现简历预览功能 │ └── [4.5M] 11- 23 本章总结：温故知新 ├── 12-人才端-&我的&合约模块（掌握Vue组件复用技巧）/ │ ├── [2.4M] 12-1 本章概览：带着目标学习 │ ├── [ 23M] 12-2 基于组件复用思想便捷实现多状态合约列表组件与数据渲染 │ └── [3.7M] 12-3 本章总结：温故知新 ├── 13-人才端-&我的&实名认证模块（掌握可复用的图片上传解决方案）/ │ ├── [3.2M] 13-1 本章概览：带着目标学习 │ ├── [ 37M] 13-2 实名认证：基础项组件设计与开发 │ ├── [ 54M] 13-3 实名认证：身份证上传功能设计与实现 │ ├── [ 53M] 13-4 认证状态：基于组件化思想设计与实现认证状态组件及数据渲染 │ └── [5.5M] 13-5 本章总结：温故知新 ├── 14-人才端-&我的&客户经理&意见反馈模块（掌握Vue开发文本回填技巧）/ │ ├── [4.5M] 14-1 本章概览：带着目标学习 │ ├── [ 67M] 14-2 专属客户经理：基于Pinia设计与实现弹窗功能 │ ├── [ 17M] 14-3 专属客户经理：基于vue-clipboard3实现复制功能 │ ├── [ 25M] 14-4 意见反馈：基于组件化设计实现编写功能 │ ├── [ 30M] 14-5 意见反馈：基于formData实现图片上传功能 │ ├── [ 28M] 14-6 关于我们语义化的设计与实现 │ └── [3.9M] 14-7 本章总结：温故知新 ├── 15-人才端-&我的&身份切换模块（掌握可复用的身份切换功能解决方案）/ │ ├── [4.7M] 15-1 本章概览：带着目标学习 │ ├── [ 69M] 15-2 身份切换：基于组件化思想设计与实现身份列表组件 │ ├── [ 38M] 15-3 身份切换：基于Pinia设计与实现身份切换设置功能 │ ├── [ 62M] 15-4 身份切换：基于vant3的popup实现身份提示弹窗组件及功能 │ ├── [ 63M] 15-5 身份切换：基于vant3的form表单设计与实现身份申请功能-1 │ ├── [ 54M] 15-6 身份切换：基于vant3的form表单设计与实现身份申请功能-2 │ └── [4.4M] 15-7 本章总结：温故知新 ├── 16-人才端-测试讲解（掌握研发自测和后期排错能力）/ │ ├── [3.3M] 16-1 本章概览：带着目标学习 │ ├── [ 23M] 16-2 人才端自测试流程：开发人员必知必会的知识-1 │ ├── [ 41M] 16-3 人才端自测试流程：开发人员必知必会的知识-2 │ ├── [ 39M] 16-4 人才端自测试流程：开发人员必知必会的知识-3 │ ├── [ 70M] 16-5 人才端自测试流程：开发人员必知必会的知识-4 │ ├── [ 21M] 16-6 人才端自测试流程：开发人员必知必会的知识-5 │ ├── [7.7M] 16-7 人才端自测试流程：开发人员必知必会的知识-6 │ ├── [ 68M] 16-8 人才端测试修改：保证开发质量&增强后期排错能力-1 │ ├── [ 60M] 16-9 人才端测试修改：保证开发质量&增强后期排错能力-2 │ └── [5.2M] 16- 10 本章总结：温故知新 ├── 17-企业端-&人才&基础模块（加强组件复用&便捷开发的能力）/ │ ├── @@更多it资源www. │ ├── [4.6M] 17-1 本章概览：带着目标学习 │ ├── [ 50M] 17-2 人才页：代码复用方案设计与实现 │ ├── [6.2M] 17-3 城市切换：基于组件复用快速实现城市列表开发及城市选择功能 │ ├── [6.1M] 17-4 职位类型：基于组件复用快速实现职位类型开发及职位选择功能 │ ├── [ 41M] 17-5 筛选页：基于组件复用快速实现筛选项开发及筛选条件切换功能 │ ├── [ 57M] 17-6 人才列表：分页、下拉刷新、加载更多逻辑功能设计与实现 │ ├── [ 67M] 17-7 人才详情页：基于组件化思想设计与实现详情组件及数据渲染-1 │ ├── [ 72M] 17-8 人才详情页：基于组件化思想设计与实现详情组件及数据渲染-2 │ ├── [ 73M] 17-9 人才详情页：基于组件化思想设计与实现详情组件及数据渲染-3 │ ├── [ 24M] 17-10 人才详情页：基于组件化思想设计与实现详情组件及数据渲染-4 │ └── [5.5M] 17- 11 章总结：温故知新 ├── 18-企业端-&人才&搜索模块（加强通用型复杂搜索功能的开发能力）/ │ ├── [5.5M] 18-1 本章概览：带着目标学习 │ ├── [8.8M] 18-2 搜索页：基于组件复用快速实现模糊搜索功能 │ ├── [ 11M] 18-3 历史搜索：基于组件复用快速实现历史搜索记录功能 │ ├── [ 11M] 18-4 热门搜索：基于组件复用快速实现热门搜索词的展示 │ ├── [ 14M] 18-5 搜索结果：基于组件复用快速实现搜索结果列表数据渲染与展示 │ ├── [9.8M] 18-6 搜索列表：基于组件复用快速实现人才与人才详情页路由跳转 │ └── [4.4M] 18-7 本章总结：温故知新 ├── 19-企业端-&消息&模块（加强轮询在企业项目中的使用能力）/ │ ├── [2.6M] 19-1 本章概览：带着目标学习 │ ├── [3.7M] 19-2 通知列表：新消息通知数量红点技术方案设计与实现 │ ├── [1.6M] 19-3 通知列表：多种类型系统消息处理技术方案设计与实现 │ ├── [ 32M] 19-4 对话列表：会跳动的消息对话列表实现逻辑设计与实现 … 其余 1 15 项略，目录共 315 项
