解决什么问题:把 AI 模型装进自己的电脑,做成可用的桌面工具
现在的 AI 应用大多在浏览器里跑,数据要上传到云端,隐私没保障,速度也受网络限制。这门课专门解决“本地化部署”和“桌面端体验”这两个痛点。它教你用 Vue 3.5 前端框架构建界面,用 Electron 框架把网页打包成 Windows、Mac 和 Linux 都能用的原生桌面软件。核心是把大语言模型(LLM)的能力接入到这个桌面应用里,让你能像用微信一样,在本地通过聊天界面调用 AI,处理文档、总结代码或者进行私密对话。对于需要频繁使用 AI 辅助工作,又不想把数据交给第三方服务的开发者来说,这是绕过浏览器限制、打造专属 AI 办公套件的直接路径。
适合什么基础:有前端基础,想掌握 Electron 打包和模型调用的进阶者
这门课不是给纯新手准备的,它要求你具备一定的 JavaScript/TypeScript 基础,熟悉 Vue 3 的组合式 API(Composition API)。如果你对“怎么把网页变成 APP”一无所知,或者对大模型 API 的调用机制(如 OpenAI 格式)不熟悉,学起来会比较吃力。课程资料适合已经写过几个 Vue 项目,现在想尝试做跨平台桌面应用的开发者。它不涉及复杂的底层系统编程,而是侧重于工程化落地:如何配置 Electron 环境、如何处理窗口通信、如何集成本地模型接口。建议先复习一下 Vue 3 的响应式原理和 ES6+ 语法,再看这部分实战内容。
学完能做什么:独立开发一款跨平台的 AI 聊天客户端
学完这套资料,你不需要再依赖现成的 AI 聊天软件,而是能从零开始搭建一个属于自己的桌面客户端。具体来说,你能掌握将 Web 项目封装为 Electron 应用的完整流程,包括窗口控制、菜单栏开发、系统托盘集成等。在功能上,你能实现类似 ChatGPT 的对话界面,支持上下文记忆、流式输出显示,并能对接本地部署的模型接口。你将理解前后端在 Electron 架构中的协作方式,学会如何处理跨进程通信。最终,你能交付一个完整的、可安装的桌面程序,不仅能自己用,还能作为产品原型进行展示或二次开发。
资料怎么用:跟着代码跑通流程,重点攻克 IPC 通信和模型集成
建议先从项目的基础环境搭建和 Electron 主进程配置入手,不要急着去写 UI。资料包中通常包含初始模板和配置文件,你需要先确保本地能成功运行起一个最简单的桌面窗口,证明环境无误。接着,重点看如何将 Vue 3 前端代码集成进去,以及主进程和渲染进程之间是如何通过 IPC(进程间通信)进行数据交换的。这是整个项目的核心难点,必须跟着代码一步步调试。当你能成功在桌面端弹出窗口并显示数据后,再尝试接入大模型接口,配置 API Key 或本地模型地址。最后,再进行界面美化和功能完善。练习时建议多尝试不同系统的打包配置,确保你的应用在 Windows 和 Mac 上都能稳定运行。
mksz921-Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战
本课程隶属 会员库 · 慕课实战课,包含完整课程目录与配套资料,购买后联系客服获取下载方式;会员可直接免费下载。
课程目录
第10章 【项目实战:第四步】使用 Pinia 完成应用状态管理/ 10-1 什么是Pinia 以及 State 基础概念【网盘分享wpfx.org.cn】.mp4 10-2 学习 Pinia 的 actions 和 getters【网盘分享wpfx.org.cn】.mp4 10-3 改造 Message Store【网盘分享wpfx.org.cn】.mp4 10-4 使用 Pinia 创建应用的整体 store 分析应用数据 接入当前数据【网盘分享wpfx.org.cn】.mp4 10-5 使用 Pinia 替换 Dexie.js 的功能,实现高效的状态与持久化存储同步【网盘分享wpfx.org.cn】.mp4 第11章 【项目实战:第五步】应用进一步功能完善(markdown、法高亮、读图功能)/ 11-1 渲染 Markdown 文本【网盘分享wpfx.org.cn】.mp4 11-10 添加读图功能 第五部分【网盘分享wpfx.org.cn】.mp4 11-11 重构不同模型返回数据方式【网盘分享wpfx.org.cn】.mp4 11-12 简介可迭代对象【网盘分享wpfx.org.cn】.mp4 11-13 简介 generator 函数【网盘分享wpfx.org.cn】.mp4 11-14 学习使用异步可迭代对象【网盘分享wpfx.org.cn】.mp4 11-15 重构通用模型 - 添加通用数据处理【网盘分享wpfx.org.cn】.mp4 11-16 最终实现通用模型类的重构【网盘分享wpfx.org.cn】.mp4 11-17 课后作业:添加 deepseek 大模型支持【网盘分享wpfx.org.cn】.mp4 11-2 添加 Tailwind Typography 插件【网盘分享wpfx.org.cn】.mp4 11-3 使用Highlight.js 完成语法高亮【网盘分享wpfx.org.cn】.mp4 11-4 功能优化:自动滚动到信息的最下方_【网盘分享wpfx.org.cn】.mp4 11-5 优化信息获取时的滚动优化【网盘分享wpfx.org.cn】.mp4 11-6 添加使用图片聊天功能 第一部分【网盘分享wpfx.org.cn】.mp4 11-7 发送图片信息编码第二部分【网盘分享wpfx.org.cn】.mp4 11-8 添加图片处理第三部分【网盘分享wpfx.org.cn】.mp4 11-9 图片处理第四部分 - 显示图片【网盘分享wpfx.org.cn】.mp4 第12章 【项目实战:第六步】 Cursor编辑器自动生成代码,完成配置页面国际化/ 12-1 添加配置页面需求分析【网盘分享wpfx.org.cn】.mp4 12-10 使用 AI 完成顶部菜单功能 第二部分【网盘分享wpfx.org.cn】.mp4 12-11 使用 AI 完成上下文菜单删除对话【网盘分享wpfx.org.cn】.mp4 12-2 初识 Cursor 并使用它完成第一个需求的开发【网盘分享wpfx.org.cn】.mp4 12-3 使用Cusror 完成配置文件的后端开发的功能【网盘分享wpfx.org.cn】.mp4 12-4 完善设置页面- 生成对应的表单以及更新功能【网盘分享wpfx.org.cn】.mp4 12-5 使用 Cursor Composer 开发国际化功能【网盘分享wpfx.org.cn】.mp4 12-6 使用 Cursor. 的读图功能完成模型界面的第一部分开发【网盘分享wpfx.org.cn】.mp4 12-7 使用 Cursor Composer 分步实现动态表单的功能【网盘分享wpfx.org.cn】.mp4 12-8 使用 Cursor 自动补全功能完成错误信息的添加以及开发【网盘分享wpfx.org.cn】.mp4 12-9 使用 AI 创建应用菜单 第一部分【网盘分享wpfx.org.cn】.mp4 第13章 【项目实战:第七步】使用Markers进行打包&使用CursorAI生成代码/ 第13章 【项目实战:第七步】使用Markers进行打包&使用CursorAI生成代码.exe 第14章 【项目实战第八步】使用Publishers进行发布&Cursor实现自动更新功能/ 14-1 简介publish 的概念和优点【网盘分享wpfx.org.cn】.mp4 14-2 使用 Cursor 自动创建 Github Release_【网盘分享wpfx.org.cn】.mp4 14-3 完成应用自动更新功能_【网盘分享wpfx.org.cn】.mp4 第1章 课前准备/ 1-1 课程导学_【网盘分享wpfx.org.cn】.mp4 第2章 未来已来,AI&跨平台桌面应用开发人才市场上需要求如何?/ 2-1 AI 时代的职场变革, 程序员会不会被取代?_【网盘分享wpfx.org.cn】.mp4 2-2 程序员在 AI 时代的职业发展规划_【网盘分享wpfx.org.cn】.mp4 2-3 课程安排以及设计思路_【网盘分享wpfx.org.cn】.mp4 第3章 【夯实基础】解锁 TypeScript 核心基础知识(选学,赠送)/ 3-1 什么是 Typescript 为什么要学习它【网盘分享wpfx.org.cn】.mp4 3-10 泛型(Generics) 第二部分 - 约束泛型【网盘分享wpfx.org.cn】.mp4 3-11 新泛型第三部分 - 泛型在类和接口中的使用【网盘分享wpfx.org.cn】.mp4 3-12 类型别名,字面量 和 交叉类型_【网盘分享wpfx.org.cn】.mp4 3-13 声明文件 第一部分【网盘分享wpfx.org.cn】.mp4 3-14 声明文件 第二部分【网盘分享wpfx.org.cn】.mp4 3-15 内置类型【网盘分享wpfx.org.cn】.mp4 3-16 配置文件【网盘分享wpfx.org.cn】.mp4 3-2 安装 Typescript【网盘分享wpfx.org.cn】.mp4 3-3 . 原始数据类型和 Any 类型【网盘分享wpfx.org.cn】.mp4 3-4 . 数组和元组【网盘分享wpfx.org.cn】.mp4 3-5 . Interface- 接口 初探【网盘分享wpfx.org.cn】.mp4 3-6 . 函数【网盘分享wpfx.org.cn】.mp4 3-7 . 类型推论 联合类型和 类型断言【网盘分享wpfx.org.cn】.mp4 3-8 枚举(Enum)【网盘分享wpfx.org.cn】.mp4 3-9 . 泛型(Generics) 第一部分【网盘分享wpfx.org.cn】.mp4 第4章 【夯实基础】Vue3.4 基础与魅力(选学,赠送)/ 4-1 Vue3 本章导学【网盘分享wpfx.org.cn】.mp4 4-10 组件基础-属性【网盘分享wpfx.org.cn】.mp4 4-11 组件自定义事件【网盘分享wpfx.org.cn】.mp4 4-12 组合式函数【网盘分享wpfx.org.cn】.mp4 4-13 创建 useURLLoader【网盘分享wpfx.org.cn】.mp4 4-14 useURLLoader 第二部分_【网盘分享wpfx.org.cn】.mp4 4-15 setup语法第一部分【网盘分享wpfx.org.cn】.mp4 4-16 setup 语法第二部分【网盘分享wpfx.org.cn】.mp4 4-17 依赖注入第一部分【网盘分享wpfx.org.cn】.mp4 4-18 依赖注入第二部分【网盘分享wpfx.org.cn】.mp4 4-19 vue3.4 3.5 更新简介【网盘分享wpfx.org.cn】.mp4 4-2 使用 vite 创建项目【网盘分享wpfx.org.cn】.mp4 4-3 文件结构以及推荐插件【网盘分享wpfx.org.cn】.mp4 4-4 ESLint 简介和初步使用【网盘分享wpfx.org.cn】.mp4 4-5 ESLint 配合 Vite 设置更多规则【网盘分享wpfx.org.cn】.mp4 4-6 响应式基础 - Ref 和 Reactive【网盘分享wpfx.org.cn】.mp4 4-7 computed 计算属性【网盘分享wpfx.org.cn】.mp4 4-8 watch 监听器【网盘分享wpfx.org.cn】.mp4 4-9 生命周期和模版引用【网盘分享wpfx.org.cn】.mp4 第5章 【夯实基础】Electron 入门与基础知识/ 5-1 介绍与安装 Electron【网盘分享wpfx.org.cn】.mp4 5-10 本章总结【网盘分享wpfx.org.cn】.mp4 5-2 创建第一个窗口【网盘分享wpfx.org.cn】.mp4 5-3 进程和线程【网盘分享wpfx.org.cn】.mp4 5-4 预加载脚本【网盘分享wpfx.org.cn】.mp4 5-5 进程间通信- 从渲染进程到主进程【网盘分享wpfx.org.cn】.mp4 5-6 进程通信- 双向通信【网盘分享wpfx.org.cn】.mp4 5-7 单向通信- 从主进程到渲染进程【网盘分享wpfx.org.cn】.mp4 5-8 使用 nodeIntegration【网盘分享wpfx.org.cn】.mp4 5-9 使用 remote 模块【网盘分享wpfx.org.cn】.mp4 第6章 【实战预热】搭建项目框架以及开发环境搭建/ 6-1 使用 Electron Forge 初始化项目【网盘分享wpfx.org.cn】.mp4 6-10 ProviderSelect 第三部分【网盘分享wpfx.org.cn】.mp4 6-2 添加 vue3 支持【网盘分享wpfx.org.cn】.mp4 6-3 介绍和安装 Tailwind.css【网盘分享wpfx.org.cn】.mp4 6-4 学习 Tailwind.css 的基础知识【网盘分享wpfx.org.cn】.mp4 6-5 编写 ConversationList 组件【网盘分享wpfx.org.cn】.mp4 6-6 使用 Iconify 作为图标解决方案【网盘分享wpfx.org.cn】.mp4 6-7 安装和初次认识 Radix Vue_【网盘分享wpfx.org.cn】.mp4 6-8 ProviderList 组件编码第一部分【网盘分享wpfx.org.cn】.mp4 6-9 ProviderList 第二部分【网盘分享wpfx.org.cn】.mp4 第7章 【项目实战:第一步】使用 Vue-Router 实现路由功能/ 第7章 【项目实战:第一步】使用 Vue-Router 实现路由功能.exe 第8章 【项目实战:第二步】大模型入门与初步实践/ 8-1 大模型基础知识科普【网盘分享wpfx.org.cn】.mp4 8-2 初步使用文心一言调用 SDK【网盘分享wpfx.org.cn】.mp4 8-3 学习文心一言SDK 第二部分:实现流式返回【网盘分享wpfx.org.cn】.mp4 8-4 学习使用阿里通义千问:了解 OpenAI SDK 的使用【网盘分享wpfx.org.cn】.mp4 8-5 使用qwen vl 完成读图功能【网盘分享wpfx.org.cn】.mp4 8-6 使用 qwen long 完成文件上传以及文本处理_【网盘分享wpfx.org.cn】.mp4 第9章 【项目实战:第三步】使用 Dexie.js (IndexedDB)持久化数据/ 第9章 【项目实战:第三步】使用 Dexie.js (IndexedDB)持久化数据.exe 解压码.txt 课件资料.exe






![mksz835-前端全栈进阶 Nextjs打造跨框架SaaS应用[11章完结]](/_next/image?url=%2Fapi%2Fuploads%2Fec69a291-7fb4-417c-bcaf-7e42ea84d093.jpg&w=1920&q=75)