如果你已经能用 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跨平台应用开发
• 大模型技术融合

课程目录

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爱好者
  • 桌面应用开发者

学习收获

掌握Vue3.5框架
精通Electron技术
实现AI桌面应用

祝您学习愉快!

学有所成,前程似锦!