这门课解决什么问题

很多开发者能独立写 Vue 组件，也能用 Electron 打包桌面应用，但一旦引入大模型和复杂状态管理，就容易陷入混乱。比如对话历史如何持久化？多模型切换时状态怎么同步？流式响应如何处理？Markdown 和图片混合渲染的 DOM 操作怎么写？这门课直接带你搭出一个完整的跨平台 AI 聊天桌面应用，把这些分散的技术点串成一条线。

适合什么基础

你需要熟悉 Vue3 的基本语法（Composition API、ref、reactive 等），了解 Electron 的基本结构（main 进程与 renderer 进程分离）。不需要深入 Pinia 或 Dexie.js，因为课程会从零讲起；也不需要 AI 模型开发经验，重点在于前端集成与状态管理。如果你正在备考 Vue+Electron 全栈岗位，或者想补齐“能做出可运行产品”的能力缺口，这门课很对口。

建议先看哪几块

前四章是环境搭建和基础架构，务必耐心过完，尤其是项目结构和路由配置部分——后面所有功能都建立在稳定的工程骨架上。接着进入第十章的状态管理，这是本课程的核心难点：Pinia 的 state、actions、getters 怎么用，如何与 Dexie.js 结合做本地持久化，这些内容直接决定应用能否支撑长时间对话场景。建议学到这里时暂停跟练，把 Message Store 自己重写一遍，才能真正理解数据流向。

学完能独立做什么

完成全部章节后，你将能独立开发具备以下能力的 AI 桌面应用：多模型切换支持（含 DeepSeek）、Markdown 渲染加代码高亮、图片发送与展示、自动滚动优化、国际化配置页面，以及使用 Cursor AI 辅助生成复杂功能代码。你还将掌握 Markers 打包流程，输出可分发的 .exe 或 .dmg 安装包。更重要的是，你积累了“用 AI 工具提效”的实战经验，后续开发类似项目时可大幅缩短周期。

资料怎么配合练习

每个章节的视频都对应一个可运行的项目阶段，建议边看边动手，不要只看不动手。第十一章和第十二章有大量重构和优化内容（如异步迭代器、generator 函数），这些是高级 JS 特性的实际应用，务必亲手改代码才能掌握。课后作业如“添加 DeepSeek 支持”是检验学习成果的关键，独立完成它对求职作品集很有价值。所有代码应逐步提交版本，方便回溯比较不同阶段的结构差异。

课程目录

第10章 【项目实战：第四步】使用 Pinia 完成应用状态管理
10-1 什么是Pinia 以及 State 基础概念.mp4 77.73M
10-2 学习 Pinia 的 actions 和 getters.mp4 86.59M
10-3 改造 Message Store.mp4 73.51M
10-4 使用 Pinia 创建应用的整体 store 分析应用数据 接入当前数据.mp4 85.99M
10-5 使用 Pinia 替换 Dexie.js 的功能，实现高效的状态与持久化存储同步.mp4 81.54M
第11章 【项目实战：第五步】应用进一步功能完善（markdown、法高亮、读图功能）
11-1 渲染 Markdown 文本.mp4 61.47M
11-10 添加读图功能 第五部分.mp4 55.32M
11-11 重构不同模型返回数据方式.mp4 68.15M
11-12 简介可迭代对象.mp4 48.87M
11-13 简介 generator 函数.mp4 46.58M
11-14 学习使用异步可迭代对象.mp4 37.09M
11-15 重构通用模型 - 添加通用数据处理.mp4 44.93M
11-16 最终实现通用模型类的重构.mp4 68.92M
11-17 课后作业：添加 deepseek 大模型支持.mp4 47.62M
11-2 添加 Tailwind Typography 插件.mp4 51.78M
11-3 使用Highlight.js 完成语法高亮.mp4 54.14M
11-4 功能优化：自动滚动到信息的最下方.mp4 112.98M
11-5 优化信息获取时的滚动优化.mp4 50.67M
11-6 添加使用图片聊天功能 第一部分.mp4 90.65M
11-7 发送图片信息编码第二部分.mp4 97.86M
11-8 添加图片处理第三部分.mp4 89.54M
11-9 图片处理第四部分 - 显示图片.mp4 89.84M
第12章 【项目实战：第六步】 Cursor编辑器自动生成代码，完成配置页面国际化
12-1 添加配置页面需求分析.mp4 38.11M
12-10 使用 AI 完成顶部菜单功能 第二部分.mp4 67.38M
12-11 使用 AI 完成上下文菜单删除对话.mp4 65.72M
12-2 初识 Cursor 并使用它完成第一个需求的开发.mp4 80.28M
12-3 使用Cusror 完成配置文件的后端开发的功能.mp4 40.17M
12-4 完善设置页面- 生成对应的表单以及更新功能.mp4 69.98M
12-5 使用 Cursor Composer 开发国际化功能.mp4 62.65M
12-6 使用 Cursor. 的读图功能完成模型界面的第一部分开发.mp4 42.63M
12-7 使用 Cursor Composer 分步实现动态表单的功能.mp4 89.97M
12-8 使用 Cursor 自动补全功能完成错误信息的添加以及开发.mp4 81.58M
12-9 使用 AI 创建应用菜单 第一部分.mp4 69.36M
第13章 【项目实战：第七步】使用Markers进行打包&使用CursorAI生成代码
13-1 应用打包 Markers 简介.mp4 38.98M
13-2 使用package 命令生成可执行文件.mp4 48.12M
13-3 探究生成的 asar 文件格式.mp4 40.51M
13-4 使用 makers 生成安装包.mp4 63.05M
13-5 使用 AI 完成应用的优化_.mp4 88.43M
第14章 【项目实战第八步】使用Publishers进行发布&Cursor实现自动更新功能
14-1 简介publish 的概念和优点.mp4 38.71M
14-2 使用 Cursor 自动创建 Github Release_.mp4 83.07M
14-3 完成应用自动更新功能_.mp4 88.74M
第1章 课前准备
1-1 课程导学_.mp4 29.12M
第2章 未来已来，AI&跨平台桌面应用开发人才市场上需要求如何？
2-1 AI 时代的职场变革， 程序员会不会被取代？_.mp4 37.07M
2-2 程序员在 AI 时代的职业发展规划_.mp4 36.99M
2-3 课程安排以及设计思路_.mp4 27.12M
第3章 【夯实基础】解锁 TypeScript 核心基础知识（选学，赠送）
3-1 什么是 Typescript 为什么要学习它.mp4 57.98M
3-10 泛型（Generics） 第二部分 - 约束泛型.mp4 37.99M
3-11 新泛型第三部分 - 泛型在类和接口中的使用.mp4 61.42M
3-12 类型别名，字面量 和 交叉类型_.mp4 23.48M
3-13 声明文件 第一部分.mp4 75.10M
3-14 声明文件 第二部分.mp4 62.14M
3-15 内置类型.mp4 45.89M
3-16 配置文件.mp4 58.66M
3-2 安装 Typescript.mp4 30.48M
3-3 . 原始数据类型和 Any 类型.mp4 31.65M
3-4 . 数组和元组.mp4 36.74M
3-5 . Interface- 接口 初探.mp4 40.97M
3-6 . 函数.mp4 50.62M
3-7 . 类型推论 联合类型和 类型断言.mp4 43.56M
3-8 枚举（Enum）.mp4 42.56M
3-9 . 泛型（Generics） 第一部分.mp4 42.17M
第4章 【夯实基础】Vue3.4 基础与魅力（选学，赠送）
4-1 Vue3 本章导学.mp4 16.06M
4-10 组件基础-属性.mp4 79.06M
4-11 组件自定义事件.mp4 46.99M
4-12 组合式函数.mp4 56.41M
4-13 创建 useURLLoader.mp4 78.73M
4-14 useURLLoader 第二部分_.mp4 52.35M
4-15 setup语法第一部分.mp4 30.90M
4-16 setup 语法第二部分.mp4 54.93M
4-17 依赖注入第一部分.mp4 61.30M
4-18 依赖注入第二部分.mp4 60.13M