getfromcode

mksz921-Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战【VIP】

前端开发
课程简介

解决什么痛点:桌面端与 Web 端的割裂 市面上大多数大模型教程仅停留在 Web 页面演示,用户无法离线使用或集成到本地工作流。本课程基于 Vue3.5、Electron 及大模型技术,旨在解决如何将 AI 能力封装成独立桌面应用的核心问题。技术栈全面覆盖了前后端融合开发、系统托盘交互、文件系统访问以及多模态(文本、图片)输入处理,填补了从“纯前端应用”到…

已有 1 人浏览 发布 2026-09-26 更新 2026-09-29

解决什么痛点:桌面端与 Web 端的割裂

市面上大多数大模型教程仅停留在 Web 页面演示,用户无法离线使用或集成到本地工作流。本课程基于 Vue3.5、Electron 及大模型技术,旨在解决如何将 AI 能力封装成独立桌面应用的核心问题。技术栈全面覆盖了前后端融合开发、系统托盘交互、文件系统访问以及多模态(文本、图片)输入处理,填补了从“纯前端应用”到“本地原生体验”之间的工程空白。

适合人群与前置要求

本课程适合已掌握 Vue3 基础组件开发、熟悉 TypeScript 语法,并希望深入 Electron 桌面开发及大模型接入的开发者。建议先确认自己能独立搭建 Vue3 工程,并了解基本的 HTTP 请求与 SSE 流式响应概念。课程后半段涉及 Generator 函数与异步可迭代对象的重构,对 JavaScript 高级语法有一定要求,初学者需做好准备。

核心模块与学完产出

建议按以下顺序对照实战:首先是第 10 章的状态管理与持久化,重点理解 Pinia 的 State、Actions、Getters,并掌握如何用 Pinia 替换 Dexie.js 实现本地 IndexedDB 数据同步,这是桌面应用数据落地的关键;其次是第 11 章的 UI 增强与多模态,通过 Markdown 渲染、语法高亮及图片发送逻辑,理解文件转 Base64 的处理流程;最后是架构重构,通过通用模型类的改写支持流式数据,并完成 DeepSeek 等第三方模型的接入。

学完后,你将具备独立开发跨平台 AI 桌面聊天的能力,能够处理复杂的本地存储与网络流。资料包是唯一的实践参照,务必跟随代码完成从 Store 初始化到模型切换的全流程,严禁只看不练。建议自行尝试接入一个新的国内大模型 API,以验证对通用模型类重构的理解程度。

课程目录

第10章 【项目实战:第四步】使用 Pinia 完成应用状态管理5 集
  • 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、法高亮、读图功能)17 集
  • 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编辑器自动生成代码,完成配置页面国际化11 集
  • 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生成代码5 集
  • 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实现自动更新功能3 集
  • 14-1 简介publish 的概念和优点.mp4 38.71M
  • 14-2 使用 Cursor 自动创建 Github Release_.mp4 83.07M
  • 14-3 完成应用自动更新功能_.mp4 88.74M
第1章 课前准备1 集
  • 1-1 课程导学_.mp4 29.12M
第2章 未来已来,AI&跨平台桌面应用开发人才市场上需要求如何?3 集
  • 2-1 AI 时代的职场变革, 程序员会不会被取代?_.mp4 37.07M
  • 2-2 程序员在 AI 时代的职业发展规划_.mp4 36.99M
  • 2-3 课程安排以及设计思路_.mp4 27.12M
第3章 【夯实基础】解锁 TypeScript 核心基础知识(选学,赠送)12 集
  • 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-7 . 类型推论 联合类型和 类型断言.mp4 43.56M
  • 3-9 . 泛型(Generics) 第一部分.mp4 42.17M
第4章 【夯实基础】Vue3.4 基础与魅力(选学,赠送)12 集
  • 4-10 组件基础-属性.mp4 79.06M
  • 4-11 组件自定义事件.mp4 46.99M
  • 4-15 setup语法第一部分.mp4 30.90M
  • 4-16 setup 语法第二部分.mp4 54.93M
  • 4-17 依赖注入第一部分.mp4 61.30M
  • 4-18 依赖注入第二部分.mp4 60.13M
  • 4-2 使用 vite 创建项目.mp4 40.24M
  • 4-3 文件结构以及推荐插件.mp4 67.35M
  • 4-4 ESLint 简介和初步使用.mp4 60.19M
  • 4-5 ESLint 配合 Vite 设置更多规则.mp4 67.12M
  • 4-6 响应式基础 - Ref 和 Reactive.mp4 68.53M
  • 4-9 生命周期和模版引用.mp4 62.32M
第5章 【夯实基础】Electron 入门与基础知识9 集
  • 5-1 介绍与安装 Electron.mp4 43.89M
  • 5-2 创建第一个窗口.mp4 58.12M
  • 5-3 进程和线程.mp4 53.95M
  • 5-4 预加载脚本.mp4 63.55M
  • 5-5 进程间通信- 从渲染进程到主进程.mp4 69.66M
  • 5-6 进程通信- 双向通信.mp4 75.62M
  • 5-7 单向通信- 从主进程到渲染进程.mp4 46.71M
  • 5-8 使用 nodeIntegration.mp4 46.12M
  • 5-9 使用 remote 模块.mp4 41.78M
第6章 【实战预热】搭建项目框架以及开发环境搭建7 集
  • 6-1 使用 Electron Forge 初始化项目.mp4 55.94M
  • 6-3 介绍和安装 Tailwind.css.mp4 64.54M
  • 6-4 学习 Tailwind.css 的基础知识.mp4 83.45M
  • 6-5 缂栧啓 ConversationList 缁勪欢.mp4 76.32M
  • 6-6 使用 Iconify 作为图标解决方案.mp4 68.18M
  • 6-7 安装和初次认识 Radix Vue_.mp4 88.55M
  • 6-8 ProviderList 组件编码第一部分.mp4 59.12M
第7章 【项目实战:第一步】使用 Vue-Router 实现路由功能6 集
  • 7-1 安装并且使用 Vue Router.mp4 61.98M
  • 7-2 MessageList 缁勪欢缂栫爜.mp4 92.21M
  • 7-3 使用useRoute 和 useRouter.mp4 61.44M
  • 7-4 完成数据实时更新.mp4 73.91M
  • 7-5 Button编码第一部分.mp4 84.40M
  • 7-6 Button 组件编码第二部分.mp4 63.27M
第8章 【项目实战:第二步】大模型入门与初步实践6 集
  • 8-1 大模型基础知识科普.mp4 57.29M
  • 8-2 初步使用文心一言调用 SDK.mp4 70.88M
  • 8-3 学习文心一言SDK 第二部分:实现流式返回.mp4 61.21M
  • 8-4 学习使用阿里通义千问:了解 OpenAI SDK 的使用.mp4 85.51M
  • 8-5 使用qwen vl 完成读图功能.mp4 65.05M
  • 8-6 使用 qwen long 完成文件上传以及文本处理_.mp4 113.69M
第9章 【项目实战:第三步】使用 Dexie.js (IndexedDB)持久化数据8 集
  • 9-1 分析和选取存储的解决方案.mp4 43.28M
  • 9-2 学习 Dexie.js 的基本用法.mp4 80.09M
  • 9-3 信息创建第一部分.mp4 107.84M
  • 9-4 完成对话和信息的创建 第二部分.mp4 68.85M
  • 9-5 调用大模型并且返回数据 第一部分.mp4 87.95M
  • 9-6 调用大模型完成信息更新第二部分.mp4 59.76M
  • 9-7 调用大模型完成信息更新第三部分 实现流式更新 展现更完美的交互.mp4 49.77M
  • 课件资料.zip 226.88kb
  • 解压密码:mksz921-Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战/
课程购买
课程价格
金币29.9
299金币限时优惠会员免费
销量:0
💎 开通会员每日免费下载,比单买更划算 →
支付成功后会自动显示下载资源云盘的链接!点击链接即可下载到本地。