如果你已经能用 Vue 写页面,却说不清「主进程和渲染进程的边界在哪」,或者调过大模型接口但没处理过流式返回的逐字渲染,这门课正好卡在这个缺口上。它的目标不是再教你一遍 ref 和 v-if,而是把 Vue3.5、Electron 和大模型三块拼成一个能跑起来的桌面聊天应用。
先确认自己缺的是哪一块
这门课适合的人大致有三类,对号入座比盲目跟学更省时间。
- 写过 Vue 项目,但没碰过 Electron:不清楚窗口怎么创建、IPC 怎么通信、打包后为什么路径全错。
- 做过 Web 端对话界面,但没做过桌面端:不知道怎么调本地能力、怎么存会话、怎么处理多窗口。
- 调过 OpenAI 或文心一言的 API,但只会 fetch 一次性拿完整结果:流式返回、中断、错误重试全靠猜。
三类人里只要有一样没做过,学起来都会遇到卡点;三样都做过,那这门课对你的价值主要是「把散装经验串成一条完整链路」。
三个技术点各自要解决什么
Vue3.5 部分
不是重讲基础语法,重点在组合式 API 怎么组织一个会话应用的状态:消息列表、当前会话、输入框、加载态之间怎么解耦。Vue3.5 对响应式做了调整,如果你之前用的是 3.2 或更早版本,一些写法习惯需要重新确认,尤其是状态量大、更新频繁的聊天场景。
Electron 部分
核心是理解进程模型。渲染进程负责界面,主进程负责窗口、文件、系统托盘这些能力,两者靠 IPC 通信。聊天应用里,网络请求放在哪一侧、密钥怎么不暴露在渲染层、窗口关闭后应用是否驻留,都是要在这里想清楚的。课程会涉及 ProviderSelect 这类组件的实现,本质是把「选哪家大模型」这件事做成可切换的配置。
大模型部分
关键是流式返回。一次性返回和逐字返回是两种完全不同的处理方式,前者拿到 JSON 就完事,后者要处理分块数据、拼接、渲染节流和中断。课程里单独讲了文心一言 SDK 的流式返回实现,这块吃透了,换其他厂商的接口思路是通的。
配套练习怎么看
资料里有可运行的工程源码,建议不要一上来就打开对照。比较有效的做法是:看完一节先自己写,卡住了再去看源码里对应的实现,重点看两处——IPC 的通道命名和流式数据的拼接逻辑。这两处是最容易写出「能跑但很脆」的地方。
另外,源码本身不大,说明它刻意去掉了无关的脚手架,这对学习是好事,但也意味着一些工程化配置需要你自己补,别指望它顺手教会你构建优化。
学完应该能回答这几个问题
- Electron 里主进程和渲染进程各该放什么,密钥为什么不放在渲染层?
- 流式返回的数据是怎么一块块到达前端的,中途用户点「停止」该怎么处理?
- 换一家大模型厂商,需要改动哪几处代码,哪些是可以抽象掉的?
- 打包成桌面应用后,本地会话记录存在哪里,和浏览器里存 localStorage 有什么不同?
如果这些问题你现在答不上来,学完再回头看一遍,答得上来就说明这门课没白看。答不上来的那几条,就是还需要补的地方。
Vue3.5+Electron+大模型实战:跨平台AI桌面聊天应用开发
打造跨平台AI桌面聊天应用
编辑点评
实战导向,结合Vue3.5、Electron与大模型技术,助你掌握跨平台桌面应用开发。
⭐ 编辑推荐
本课程深入浅出,带你从零开始构建跨平台的AI桌面聊天应用。
课程亮点
课程目录
Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战资料.png [493.5 KB] vchat-main_().zip [181.2 KB] 8-3 学习文心一言SDK 第二部分:实现流式返回_().mp4 [61.2 MB] 12-11 使用 AI 完成上下文菜单删除对话_().mp4 [65.7 MB] 13-5 使用 AI 完成应用的优化__().mp4 [88.4 MB] 5-10 本章总结_().mp4 [46.1 MB] 11-11 重构不同模型返回数据方式_().mp4 [68.1 MB] 4-1 Vue3 本章导学_().mp4 [16.1 MB] 11-9 图片处理第四部分 - 显示图片_().mp4 [89.8 MB] 6-10 ProviderSelect 第三部分_().mp4 [56.8 MB] 13-2 使用package 命令生成可执行文件_().mp4 [48.1 MB] 2-1 AI 时代的职场变革, 程序员会不会被取代?__().mp4 [37.1 MB] 2-3 课程安排以及设计思路__().mp4 [27.1 MB] 5-3 进程和线程_().mp4 [53.9 MB] 2-2 程序员在 AI 时代的职业发展规划__().mp4 [37.0 MB] 12-5 使用 Cursor Composer 开发国际化功能_().mp4 [62.7 MB] 5-9 使用 remote 模块_().mp4 [41.8 MB] learn-electron-master_().zip [14.6 KB] 13-3 探究生成的 asar 文件格式_().mp4 [40.5 MB] 11-15 重构通用模型 - 添加通用数据处理_().mp4 [44.9 MB] 4-6 响应式基础 - Ref 和 Reactive_().mp4 [68.5 MB] 10-3 改造 Message Store_().mp4 [73.5 MB] 11-2 添加 Tailwind Typography 插件_().mp4 [51.8 MB] 11-7 发送图片信息编码第二部分_().mp4 [97.9 MB] 12-1 添加配置页面需求分析_().mp4 [38.1 MB] 8-2 初步使用文心一言调用 SDK_().mp4 [70.9 MB] 3-4 . 数组和元组_().mp4 [36.7 MB] 3-16 配置文件_().mp4 [58.7 MB] 3-10 泛型(Generics) 第二部分 - 约束泛型_().mp4 [38.0 MB] 1-1 课程导学__().mp4 [29.1 MB] 3-15 内置类型_().mp4 [45.9 MB] 11-10 添加读图功能 第五部分_().mp4 [55.3 MB] 6-1 使用 Electron Forge 初始化项目_().mp4 [55.9 MB] 11-13 简介 generator 函数_().mp4 [46.6 MB] 13-1 应用打包 Markers 简介_().mp4 [39.0 MB] 9-4 完成对话和信息的创建 第二部分_().mp4 [68.8 MB] 6-2 添加 vue3 支持_().mp4 [34.8 MB] 6-8 ProviderList 组件编码第一部分_().mp4 [59.1 MB] 5-5 进程间通信- 从渲染进程到主进程_().mp4 [69.7 MB] 11-3 使用Highlight.js 完成语法高亮_().mp4 [54.1 MB] 6-6 使用 Iconify 作为图标解决方案_().mp4 [68.2 MB] 5-4 预加载脚本_().mp4 [63.6 MB] 14-2 使用 Cursor 自动创建 Github Release__().mp4 [83.1 MB] 4-19 vue3.4 3.5 更新简介_().mp4 [61.6 MB] 8-5 使用qwen vl 完成读图功能_().mp4 [65.1 MB] 4-15 setup语法第一部分_().mp4 [30.9 MB] 9-7 调用大模型完成信息更新第三部分 实现流式更新 展现更完美的交互_().mp4 [49.8 MB] 3-11 新泛型第三部分 - 泛型在类和接口中的使用_().mp4 [61.4 MB] 3-1 什么是 Typescript 为什么要学习它_().mp4 [58.0 MB] 4-5 ESLint 配合 Vite 设置更多规则_().mp4 [67.1 MB] 6-7 安装和初次认识 Radix Vue__().mp4 [88.5 MB] 10-2 学习 Pinia 的 actions 和 getters_().mp4 [86.6 MB] 3-6 . 函数_().mp4 [50.6 MB] 12-8 使用 Cursor 自动补全功能完成错误信息的添加以及开发_().mp4 [81.6 MB] 11-17 课后作业:添加 deepseek 大模型支持_().mp4 [47.6 MB] 9-5 调用大模型并且返回数据 第一部分_().mp4 [87.9 MB] 8-4 学习使用阿里通义千问:了解 OpenAI SDK 的使用_().mp4 [85.5 MB] 3-12 类型别名,字面量 和 交叉类型__().mp4 [23.5 MB] 12-4 完善设置页面- 生成对应的表单以及更新功能_().mp4 [70.0 MB] 7-4 完成数据实时更新_().mp4 [73.9 MB] 11-5 优化信息获取时的滚动优化_().mp4 [50.7 MB] 8-6 使用 qwen long 完成文件上传以及文本处理__().mp4 [113.7 MB] 11-1 渲染 Markdown 文本_().mp4 [61.5 MB] 5-2 创建第一个窗口_().mp4 [58.1 MB] 4-8 watch 监听器_().mp4 [72.1 MB] 11-4 功能优化:自动滚动到信息的最下方__().mp4 [113.0 MB] 7-3 使用useRoute 和 useRouter_().mp4 [61.4 MB] 12-9 使用 AI 创建应用菜单 第一部分_().mp4 [69.4 MB] 11-14 学习使用异步可迭代对象_().mp4 [37.1 MB] 13-4 使用 makers 生成安装包_().mp4 [63.1 MB] 4-13 创建 useURLLoader_().mp4 [78.7 MB] 5-1 介绍与安装 Electron_().mp4 [43.9 MB] 3-2 安装 Typescript_().mp4 [30.5 MB] 12-6 使用 Cursor. 的读图功能完成模型界面的第一部分开发_().mp4 [42.6 MB] 4-11 组件自定义事件_().mp4 [47.0 MB] 12-3 使用Cusror 完成配置文件的后端开发的功能_().mp4 [40.2 MB] 5-6 进程通信- 双向通信_().mp4 [75.6 MB] 4-18 依赖注入第二部分_().mp4 [60.1 MB] 11-16 最终实现通用模型类的重构_().mp4 [68.9 MB] 7-1 安装并且使用 Vue Router_().mp4 [62.0 MB] 14-3 完成应用自动更新功能__().mp4 [88.7 MB] 4-7 computed 计算属性_().mp4 [44.8 MB] 4-10 组件基础-属性_().mp4 [79.1 MB] 6-5 编写 ConversationList 组件_().mp4 [76.3 MB] 12-2 初识 Cursor 并使用它完成第一个需求的开发_().mp4 [80.3 MB] 10-4 使用 Pinia 创建应用的整体 store 分析应用数据 接入当前数据_().mp4 [86.0 MB] 10-1 什么是Pinia 以及 State 基础概念_().mp4 [77.7 MB] 12-10 使用 AI 完成顶部菜单功能 第二部分_().mp4 [67.4 MB] 4-4 ESLint 简介和初步使用_().mp4 [60.2 MB] 5-8 使用 nodeIntegration_().mp4 [46.1 MB] 3-7 . 类型推论 联合类型和 类型断言_().mp4 [43.6 MB] 12-7 使用 Cursor Composer 分步实现动态表单的功能_().mp4 [90.0 MB] 11-12 简介可迭代对象_().mp4 [48.9 MB] 4-3 文件结构以及推荐插件_().mp4 [67.4 MB] 7-5 Button编码第一部分_().mp4 [84.4 MB] 8-1 大模型基础知识科普_().mp4 [57.3 MB] 3-5 . Interface- 接口 初探_().mp4 [41.0 MB] 9-3 信息创建第一部分_().mp4 [107.8 MB] 7-6 Button 组件编码第二部分_().mp4 [63.3 MB] 7-2 MessageList 组件编码_().mp4 [92.2 MB]
适合人群
- 前端开发者
- AI爱好者
- 桌面应用开发者
学习收获
祝您学习愉快!
学有所成,前程似锦!






