一、课程概述

《黑马·基于 Vue3.2 + TypeScript 的医疗问诊项目》是一门以真实互联网医疗业务场景为核心的前端实战课程。课程通过完整实现一个在线医疗问诊平台，系统讲解 Vue3.2 组合式 API 与 TypeScript 在企业级项目中的落地方式，帮助学习者从“会用框架”提升到“能做完整业务项目”。

与简单示例项目不同，该课程以业务流程复杂、状态管理清晰、工程结构规范为目标，强调前端在真实产品中的角色与价值。

二、课程技术栈

课程采用当前主流、企业真实使用的技术方案：

  • Vue 3.2
    • Composition API
    • 更清晰的逻辑拆分与复用
  • TypeScript
    • 全项目强类型约束
    • 提升代码可读性与稳定性
  • Vite
    • 现代化构建工具，开发体验优秀
  • Pinia
    • Vue 官方推荐状态管理方案
  • Vue Router 4
    • 路由模块化与权限控制
  • Axios
    • 请求统一封装与拦截处理

通过项目实战，让学习者真正理解 Vue3 + TS + 工程化 的协作方式，而不是停留在 API 使用层面。

三、项目业务背景与整体结构

项目模拟一个 移动端 H5 在线医疗问诊平台，高度贴近真实医疗类 App（如在线问诊、远程咨询类产品），核心围绕“用户问诊流程”展开。

整体项目按照企业级思路进行拆分：

  • 用户体系
  • 问诊业务流程
  • 医生与科室管理
  • 订单与支付
  • 问诊沟通
  • 处方与结果展示

结构清晰、模块职责明确，适合用作中大型项目学习范例。

四、核心功能模块详解

1. 用户登录与鉴权模块

  • 手机号 + 验证码登录
  • Token 管理与本地存储
  • 登录状态持久化
  • 路由鉴权拦截（未登录跳转登录页）

学习重点：

  • 登录流程设计
  • axios 请求/响应拦截器
  • Vue Router 路由守卫

2. 医疗问诊核心流程（项目主线）

完整还原真实医疗问诊业务流程：

  1. 选择科室
  2. 选择医生
  3. 填写病情描述
  4. 选择问诊类型（图文 / 视频）
  5. 创建问诊订单
  6. 支付
  7. 医生接诊
  8. 问诊沟通
  9. 问诊结束与结果展示

该模块是课程的核心亮点，重点训练学习者对复杂业务流程和状态流转的掌控能力。

3. 医生列表与医生详情模块

  • 医生列表展示
  • 医生信息（职称、医院、擅长领域）
  • 问诊价格与服务类型
  • 医生详情页面

技术点：

  • 列表渲染与分页
  • 数据接口类型定义
  • 组件拆分与复用

4. 订单与支付模块

  • 问诊订单创建
  • 模拟支付流程
  • 支付成功/失败状态处理
  • 订单状态展示

重点内容：

  • 订单状态枚举（enum）管理
  • 业务状态与页面展示解耦
  • TypeScript 在复杂状态管理中的应用

5. 问诊沟通模块（实战价值高）

  • 图文问诊聊天界面
  • 用户与医生消息区分
  • 消息列表动态渲染
  • 问诊结束状态控制

该模块贴近真实业务，对提升 复杂页面逻辑处理能力 非常有帮助。

6. 处方与问诊结果模块

  • 医生开具处方
  • 药品信息展示
  • 用药说明渲染
  • 问诊结果归档

五、TypeScript 的实际应用价值

课程并非“形式化使用 TS”，而是将 TypeScript 深度融入项目中：

  • 接口返回数据类型定义
  • 业务状态统一枚举管理
  • 泛型封装请求函数
  • 组件 Props 与事件类型约束
  • 减少运行时错误，提升代码可靠性

帮助学习者完成从 “会写 TS”到“用 TS 做项目” 的转变。

六、工程化与项目规范

  • 合理的项目目录结构设计
  • API、Store、View、Component 分层
  • 统一命名规范与代码风格
  • 逻辑拆分，避免组件臃肿
  • 易维护、易扩展的工程结构

这些内容高度贴近真实公司开发流程。

七、适合人群

适合：

  • 已掌握 JavaScript 基础
  • 学过 Vue2 或 Vue3，希望进阶实战
  • 想系统学习 Vue3 + TypeScript 项目开发
  • 准备求职前端岗位、补充项目经验的人群

不适合：

  • 完全零基础前端学习者

八、课程价值总结

  • ✅ 真实医疗业务场景，非简单 Demo
  • ✅ Vue3.2 + TypeScript 全流程实战
  • ✅ 业务逻辑完整，贴近企业项目
  • ✅ 项目可直接写入简历
  • ✅ 对理解中大型前端项目非常有帮助

如果你想做一个有业务深度、能体现技术能力的 Vue3 项目，这套医疗问诊课程非常值得完整跟一遍。

课程截图：

课程目录：

| ├──day01-Vue3.组合API-01.认识Vue3_ev.mp4 14.39M
| ├──day01-Vue3.组合API-02.使用create-vue创建项目_ev.mp4 12.26M
| ├──day01-Vue3.组合API-03.熟悉项目目录和关键文件_ev.mp4 16.51M
| ├──day01-Vue3.组合API-04.组合式API入口-setup_ev.mp4 22.80M
| ├──day01-Vue3.组合API-05.组合式API-reactive和ref函数_ev.mp4 26.47M
| ├──day01-Vue3.组合API-06.组合式API-computed_ev.mp4 17.98M
| ├──day01-Vue3.组合API-07.组合式API-watch-基本使用和立即执行_ev.mp4 29.11M
| ├──day01-Vue3.组合API-08.组合式API-watch-深度侦听和精确侦听_ev.mp4 21.31M
| ├──day01-Vue3.组合API-09.组合式API-生命周期函数_ev.mp4 14.18M
| ├──day01-Vue3.组合API-10.组合式API下的父子通信-父传子_ev.mp4 23.25M
| ├──day01-Vue3.组合API-11.组合式API下的父子通信-子传父_ev.mp4 15.91M
| ├──day01-Vue3.组合API-12.组合式API-模版引用_ev.mp4 17.64M
| ├──day01-Vue3.组合API-13.组合式API-provide和inject_ev.mp4 36.49M
| ├──day01-Vue3.组合API-14.Vue3综合小案例_ev.mp4 39.50M
| ├──day01-Vue3.组合API-15.补充作业-编辑功能作业_ev.mp4 51.13M
| ├──day02-TypeScript核心-01.TS核心-认识TypeScript_ev.mp4 10.47M
| ├──day02-TypeScript核心-02.TS核心-编译环境搭建_ev.mp4 20.82M
| ├──day02-TypeScript核心-03.TS核心-类型注解的概念_ev.mp4 11.55M
| ├──day02-TypeScript核心-04.TS核心-注解数组_ev.mp4 13.65M
| ├──day02-TypeScript核心-05.TS核心-联合类型和别名类型_ev.mp4 16.72M
| ├──day02-TypeScript核心-06.TS核心-函数类型-概念和基本使用_ev.mp4 22.13M
| ├──day02-TypeScript核心-07.TS核心-函数类型-可选参和无返回值_ev.mp4 25.35M
| ├──day02-TypeScript核心-08.TS核心-interface-概念和基本使用_ev.mp4 20.81M
| ├──day02-TypeScript核心-09.TS核心-interface-可选设置和继承_ev.mp4 22.83M
| ├──day02-TypeScript核心-10.TS核心-type注解对象类型_ev.mp4 26.43M
| ├──day02-TypeScript核心-11.TS核心-字面量类型_ev.mp4 16.47M
| ├──day02-TypeScript核心-12.TS核心-类型推论和any类型_ev.mp4 13.86M
| ├──day02-TypeScript核心-13.TS核心-类型断言_ev.mp4 13.99M
| ├──day02-TypeScript核心-14.TS核心-泛型概念理解和泛型接口_ev.mp4 23.27M
| ├──day02-TypeScript核心-15.TS核心-泛型type和泛型函数_ev.mp4 21.03M
| ├──day02-TypeScript核心-16.TS核心-泛型约束_ev.mp4 10.61M
| ├──day02-TypeScript核心-17.TS综合小案例-01_ev.mp4 15.86M
| ├──day02-TypeScript核心-18.TS综合小案例-02_ev.mp4 26.65M
| ├──day03-综合案例-01.Vue3+TS环境创建_ev.mp4 19.30M
| ├──day03-综合案例-02.为ref标注类型_ev.mp4 16.07M
| ├──day03-综合案例-03.为reactive标注类型修复_ev.mp4 21.66M
| ├──day03-综合案例-04.为计算属性标注类型_ev.mp4 12.50M
| ├──day03-综合案例-05.为事件处理函数标注类型_ev.mp4 11.57M
| ├──day03-综合案例-06.为模版引用标注类型_ev.mp4 12.77M
| ├──day03-综合案例-07.对象的非空值处理_ev.mp4 10.90M
| ├──day03-综合案例-08.为props标注类型_ev.mp4 20.62M
| ├──day03-综合案例-09.为组件的emits的标注类型_ev.mp4 16.89M
| ├──day03-综合案例-10.类型声明文件d.ts-01_ev.mp4 23.23M
| ├──day03-综合案例-11.类型声明文件d.ts-02_ev.mp4 15.18M
| ├──day03-综合案例-12.综合案例-需求熟悉和环境准备_ev.mp4 14.61M
| ├──day03-综合案例-13.综合案例-实现频道列表渲染_ev.mp4 32.92M
| ├──day03-综合案例-14.综合案例-文章列表基础渲染_ev.mp4 31.80M
| ├──day03-综合案例-15.综合案例-频道和文章列表联动实现_ev.mp4 12.85M
| ├──day03-综合案例-16.综合案例-综合和类型优化_ev.mp4 21.76M
| ├──day03-综合案例-17.Pinia-环境搭建和基础使用_ev.mp4 31.46M
| ├──day03-综合案例-18.Pinia-getters和异步action_ev.mp4 27.98M
| ├──day03-综合案例-19.Pinia-storeToRefs和调试_ev.mp4 14.47M
| ├──day04-项目配置与架构-01-创建问诊项目_ev.mp4 13.45M
| ├──day04-项目配置与架构-02-项目配置_ev.mp4 19.10M
| ├──day04-项目配置与架构-03-配置代码检查工作流_ev.mp4 31.87M
| ├──day04-项目配置与架构-04-目录调整_ev.mp4 18.80M
| ├──day04-项目配置与架构-05-vue-router初始化_ev.mp4 26.83M
| ├──day04-项目配置与架构-06-基础架构-引入Vant和移动端适配_ev.mp4 30.55M
| ├──day04-项目配置与架构-07-基础架构-主题定制_ev.mp4 23.19M
| ├──day04-项目配置与架构-08-基础架构-用户仓库和持久化_ev.mp4 34.83M
| ├──day04-项目配置与架构-09-基础架构-统一管理_ev.mp4 22.49M
| ├──day04-项目配置与架构-10-请求工具-axios配置_ev.mp4 27.18M
| ├──day04-项目配置与架构-11-请求工具-业务失败处理和摘取核心响应数据_ev.mp4 32.23M
| ├──day04-项目配置与架构-12-请求工具-401处理_ev.mp4 25.27M
| ├──day04-项目配置与架构-13-请求工具-工具函数_ev.mp4 21.21M
| ├──day04-项目配置与架构-14-请求工具-类型设置_ev.mp4 26.88M
| ├──day05-cp-nav-bar组件-01-路由规则和准备登录页面_ev.mp4 16.84M
| ├──day05-cp-nav-bar组件-02-组件自动注册配置_ev.mp4 39.50M
| ├──day05-cp-nav-bar组件-03-cp-nav-bar组件-结构和样式_ev.mp4 24.99M
| ├──day05-cp-nav-bar组件-04-cp-nav-bar功能标题和右侧文字与右侧文字自定义事件_ev.mp4 24.68M
| ├──day05-cp-nav-bar组件-05-cp-nav-bar功能-回退_ev.mp4 21.10M
| ├──day05-cp-nav-bar组件-06-cp-nav-bar组件类型_ev.mp4 19.78M
| ├──day05-cp-nav-bar组件-07-登录页面布局和清理代码_ev.mp4 26.05M
| ├──day05-cp-nav-bar组件-08-登录页面-表单校验_ev.mp4 51.12M
| ├──day05-cp-nav-bar组件-09-登录页面-密码登录_ev.mp4 31.75M
| ├──day05-cp-nav-bar组件-10-短信登录-切换界面_ev.mp4 33.41M
| ├──day05-cp-nav-bar组件-11-短信登录-发送验证码_ev.mp4 48.40M
| ├──day05-cp-nav-bar组件-12-短信登录-进行登录_ev.mp4 19.75M
| ├──day05-cp-nav-bar组件-13-图标组件-打包svg地图_ev.mp4 24.84M
| ├──day05-cp-nav-bar组件-14-图片组件-svg组件封装_ev.mp4 28.76M
| ├──day06-布置容器.家庭档案-01-布局容器-组件与路由配置_ev.mp4 16.19M
| ├──day06-布置容器.家庭档案-02-布局容器-Tabbar切换效果_ev.mp4 37.95M
| ├──day06-布置容器.家庭档案-03-布局容器-访问权限控制_ev.mp4 17.02M
| ├──day06-布置容器.家庭档案-04-布局容器-页面标题_ev.mp4 21.40M
| ├──day06-布置容器.家庭档案-05-布局容器-加载进度_ev.mp4 22.17M
| ├──day06-布置容器.家庭档案-06-个人中心-用户信息类型_ev.mp4 25.80M
| ├──day06-布置容器.家庭档案-07-个人中心-用户信息渲染_ev.mp4 44.41M
| ├──day06-布置容器.家庭档案-08-个人中心-快捷工具和退出登录_ev.mp4 49.38M
| ├──day06-布置容器.家庭档案-09-家庭档案-展示患者列表-01-路由与组件结构_ev.mp4 13.51M
| ├──day06-布置容器.家庭档案-09-家庭档案-展示患者列表-02-完成渲染_ev.mp4 40.71M
| ├──day06-布置容器.家庭档案-10-家庭档案-添加患者-v-model语法糖_ev.mp4 31.92M
| ├──day06-布置容器.家庭档案-11-家庭档案-单选按钮组件封装_ev.mp4 38.19M
| ├──day06-布置容器.家庭档案-12-家庭档案-添加患者界面和侧滑_ev.mp4 44.85M
| ├──day06-布置容器.家庭档案-13-家庭档案-添加患者-表单数据绑定_ev.mp4 41.32M
| ├──day06-布置容器.家庭档案-14-家庭档案-添加患者-表单校验-01-表单项和提交时校_ev.mp4 40.83M
| ├──day06-布置容器.家庭档案-14-家庭档案-添加患者-表单校验-02-性别确认提示_ev.mp4 22.83M
| ├──day06-布置容器.家庭档案-15-家庭档案-添加患者-进行提交_ev.mp4 19.11M
| ├──day06-布置容器.家庭档案-16-家庭档案-编辑患者_ev.mp4 40.67M
| ├──day06-布置容器.家庭档案-17-家庭档案-删除患者_ev.mp4 33.75M
| ├──day07-首页模块.极速问诊-01-首页模块-搭建页面_ev.mp4 35.12M
| ├──day07-首页模块.极速问诊-02-首页模块-知识列表加载更多效果_ev.mp4 46.15M
| ├──day07-首页模块.极速问诊-03-首页模块-知识列表数据类型_ev.mp4 22.99M
| ├──day07-首页模块.极速问诊-04-首页模块-知识列表加载功能_ev.mp4 65.93M
| ├──day07-首页模块.极速问诊-05-首页模块-搭建推荐关注组件_ev.mp4 30.29M
| ├──day07-首页模块.极速问诊-06-首页模块-适配滑动宽度-采用VueUse_ev.mp4 40.46M
| ├──day07-首页模块.极速问诊-07-首页模块-推荐医生展示_ev.mp4 35.68M
| ├──day07-首页模块.极速问诊-08-首页模块-关注医生_ev.mp4 31.93M
| ├──day07-首页模块.极速问诊-09-首页模块-逻辑复用关注文章_ev.mp4 34.57M
| ├──day07-首页模块.极速问诊-10-极速问诊-功能演示_ev.mp4 8.13M
| ├──day07-首页模块.极速问诊-11-极速问诊-枚举语法_ev.mp4 29.44M
| ├──day07-首页模块.极速问诊-12-极速问诊-问诊信息类型定义_ev.mp4 27.86M
| ├──day07-首页模块.极速问诊-13-极速问诊-选择问诊类型_ev.mp4 25.10M
| ├──day07-首页模块.极速问诊-14-极速问诊-选择问诊级别_ev.mp4 22.04M
| ├──day07-首页模块.极速问诊-15-极速问诊-选择问诊科室_ev.mp4 51.07M
| ├──day08-病情描述.问诊支付-01-极速问诊-病情描述-页面准备_ev.mp4 36.01M
| ├──day08-病情描述.问诊支付-02-极速问诊-病情描述-上传组件_ev.mp4 32.60M
| ├──day08-病情描述.问诊支付-03-极速问诊-病情描述-上传业务_ev.mp4 48.40M
| ├──day08-病情描述.问诊支付-04-极速问诊-病情描述-保存数据_ev.mp4 44.42M
| ├──day08-病情描述.问诊支付-05-极速问诊-病情描述-回显数据_ev.mp4 30.61M
| ├──day08-病情描述.问诊支付-06-极速问诊-选择患者_ev.mp4 64.14M
| ├──day08-病情描述.问诊支付-07-极速问诊-问诊支付-获取数据_ev.mp4 55.50M
| ├──day08-病情描述.问诊支付-08-极速问诊-问诊支付-完成渲染_ev.mp4 37.80M
| ├──day08-病情描述.问诊支付-09-极速问诊-问诊支付-支付流程_ev.mp4 12.25M
| ├──day08-病情描述.问诊支付-10-极速问诊-问诊支付-生成订单_ev.mp4 59.91M
| ├──day08-病情描述.问诊支付-11-极速问诊-问诊支付-用户引导-01-阻止回退和关闭抽屉_ev.mp4 41.07M
| ├──day08-病情描述.问诊支付-11-极速问诊-问诊支付-用户引导-02-刷新后校验信息完整性_ev.mp4 34.53M
| ├──day08-病情描述.问诊支付-12-极速问诊-问诊支付-完成支付_ev.mp4 42.11M
| ├──day08-病情描述.问诊支付-13-问诊室-组件拆分页面布局_ev.mp4 41.26M
| ├──day09-问诊室-01-问诊室-websocket介绍_ev.mp4 31.25M
| ├──day09-问诊室-02-问诊室-socket.io-client使用_ev.mp4 36.25M
| ├──day09-问诊室-03-问诊室-建立连接_ev.mp4 30.50M
| ├──day09-问诊室-04-问诊室-通信规则和默认消息获取_ev.mp4 16.88M
| ├──day09-问诊室-05-问诊室-默认消息-处理格式_ev.mp4 44.17M
| ├──day09-问诊室-06-问诊室-默认消息-完成渲染_ev.mp4 62.75M
| ├──day09-问诊室-07-问诊室-接诊状态-订单数据_ev.mp4 39.91M
| ├──day09-问诊室-08-问诊室-接诊状态-控制组件_ev.mp4 38.35M
| ├──day09-问诊室-09-问诊室-文字聊天-发送文字_ev.mp4 29.61M
| ├──day09-问诊室-10-问诊室-文本聊天-渲染文字_ev.mp4 42.94M
| ├──day09-问诊室-11-问诊室-图片聊天_ev.mp4 43.66M
| ├──day09-问诊室-12-问诊室-聊天记录_ev.mp4 51.34M
| ├──day09-问诊室-13-问诊室-消息已读_ev.mp4 33.61M
| ├──day09-问诊室-14-问诊室-查看处方_ev.mp4 32.69M
| ├──day10-问诊记录,详情-01-评价医生-结束消息和评价消息展示_ev.mp4 53.23M
| ├──day10-问诊记录,详情-02-评价医生-提交评价_ev.mp4 58.26M
| ├──day10-问诊记录,详情-03-问诊记录-搭建页面_ev.mp4 28.98M
| ├──day10-问诊记录,详情-04-问诊记录-加载数据_ev.mp4 43.26M
| ├──day10-问诊记录,详情-05-问诊记录-渲染Item组件-01-基本信息与操作按钮_ev.mp4 50.99M
| ├──day10-问诊记录,详情-05-问诊记录-渲染Item组件-02-更多操作效果_ev.mp4 30.42M
| ├──day10-问诊记录,详情-06-问诊记录-取消订单_ev.mp4 21.82M
| ├──day10-问诊记录,详情-07-问诊记录-删除订单_ev.mp4 32.53M
| ├──day10-问诊记录,详情-08-问诊记录-查看处方composable_ev.mp4 18.71M
| ├──day10-问诊记录,详情-09-问诊详情-页面渲染_ev.mp4 58.08M
| ├──day10-问诊记录,详情-10-问诊详情-更多组件封装_ev.mp4 38.25M
| ├──day10-问诊记录,详情-11-问诊详情-操作按钮展示_ev.mp4 34.98M
| ├──day10-问诊记录,详情-12-问诊详情-取消订单composable_ev.mp4 22.29M
| ├──day10-问诊记录,详情-13-问诊详情-删除订单composable_ev.mp4 38.99M
| ├──day11-药品订单-01-问诊详情-复制订单编号_ev.mp4 19.11M
| ├──day11-药品订单-02-问诊详情-支付抽屉组件_ev.mp4 63.82M
| ├──day11-药品订单-03-药品订单-进入药品支付_ev.mp4 28.89M
| ├──day11-药品订单-04-药品订单-支付信息展示_ev.mp4 67.34M
| ├──day11-药品订单-05-药品支付-进行支付_ev.mp4 58.87M
| ├──day11-药品订单-06-药品订单-支付结果_ev.mp4 44.21M
| ├──day11-药品订单-07-药品订单-订单详情-01使用提取的详情函数和药品清单_ev.mp4 45.57M
| ├──day11-药品订单-07-药品订单-订单详情-02完成渲染_ev.mp4 47.49M
| ├──day11-药品订单-08-药品订单-物流详情_ev.mp4 41.24M
| ├──day11-药品订单-09-药品订单-使用高德地图_ev.mp4 50.13M
| ├──day11-药品订单-11-药品订单-绘制起点终点当前运输位置_ev.mp4 76.64M
| ├──day12-三方登录.部署-01-三方登录-QQ登录流程和演示_ev.mp4 18.33M
| ├──day12-三方登录.部署-02-三方登录-去QQ登录且回跳_ev.mp4 47.74M
| ├──day12-三方登录.部署-03-三方登录-使用openId登录_ev.mp4 45.30M
| ├──day12-三方登录.部署-04-三方登录-验证码composable_ev.mp4 33.19M
| ├──day12-三方登录.部署-05-三方登录-绑定手机_ev.mp4 39.96M
| ├──day12-三方登录.部署-06-部署-开发环境与生产环境-01如何区分_ev.mp4 27.16M
| ├──day12-三方登录.部署-06-部署-开发环境与生产环境-02设置标题和回跳域名_ev.mp4 42.16M
| ├──day12-三方登录.部署-07-部署-真机调试_ev.mp4 24.70M
| ├──day12-三方登录.部署-08-部署-pm2托管_ev.mp4 17.56M
| ├──day12-三方登录.部署-09-部署-gitlab自动部署演示_ev.mp4 37.85M
| ├──day12-三方登录.部署-10-扩展-mock数据-01-模拟接口.mp4 36.77M
| ├──day12-三方登录.部署-10-扩展-mock数据-01-模拟接口_ev.mp4 33.50M
| ├──day12-三方登录.部署-10-扩展-mock数据-02-生成数据.mp4 34.75M
| ├──day12-三方登录.部署-10-扩展-mock数据-02-生成数据_ev.mp4 31.08M
| ├──day12-三方登录.部署-11-扩展-单元测试.mp4 31.35M
| ├──day12-三方登录.部署-11-扩展-单元测试_ev.mp4 30.36M
| ├──day12-三方登录.部署-12-扩展-组件测试.mp4 55.37M
| └──day12-三方登录.部署-12-扩展-组件测试_ev.mp4 49.79M
├──资料

声明：本站所发布的一切视频课程仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站所有课程来自网络，版权争议与本站无关。如有侵权请联系联系客服QQ：1960026872或登录本站账号进入个人中心提交工单留言反馈，我们将第一时间处理！