2025张轩-Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战-慕课[MP4/7.11GB]百度网盘

课程名称：

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

一课打通文心一言/通义千问/Deepseek/Claude/Cursor与Vue3、Electron全链路技术点

张轩：前Apple、百度高级前端工程师

曾在Apple、百度担任高级前端开发工程师，是《React全栈:Redux Flux webpack Babel整合开发》该书作者，拥有丰富的Web开发经验，喜欢追寻新技术,同时致力于前端工程化，并且有大型SPA项目的架构及开发经验

本课程将由慕课网名师采用最新前端技术栈Vue3.5、TS、Vite、Pinia、Radix Vue.IndexedDB、 Dexie.js ，与多种知名A大模型(文心一言/通义千问/Claude /Deepseek)，手把手带你开发一个跨平台的 AI 桌面聊天应用，同时教你用 Cursor 辅助开发倍速提升开发效率。无论你是初涉 AI 领域的新手，还是渴望突破前端技能瓶颈的进阶者，这门课程都将助力你构建未来核心竞争力，让你在 AI 浪潮中抢占先机。

你将学到

1.4大经典AI大模型实战

2.Cursor辅助编程N倍提效

3.Vue3与Electron整套技术

4.跨平台AI聊天应用全流程

5.慕课网名师“保姆式”教学

6.主流技术+A1 技术实战经验

大家好，我是你们的老朋友张轩老师，这次呢我带来了一套全新课程，看标题呢就一目了然。用Vue3.5加Electron加上各种大模型，实现一个跨平台AI桌面聊天应用，那副标题呢一课打通文心一言/通义千问/Deepseek/Claude/Cursor与Vue3、Electron全链路的技术点。从标题大家就可以看到，今年非常多，非常火，非常热的知识点。那么这个应用呢结合了目前前端和AI相关的几乎所有的重要知识点。我自己呢在去年到今年也感受到了前端的巨变，按照自己的经验呢推出了这门课程。

为什么要做这门课程呢?我们还是要从问题来谈起，那么也就是呢AI会不会取代程序员?在AI时代呢，程序员应该怎样进行职业规划?

我认为呢实际上AI带来的不是威胁，而是呢一次。AI带来的不是威胁，而是呢一次重大的机遇，Ai正在重塑我们的工作方式，这些改变的本质呢，是AI呢在帮助我们摆脱重复性的基础工作，让我们能够专注于更有价值的决策和创造性工作。

那么现在有很多热炒的话题呢都说程序员要被AI取代。不仅呢让非常多还在学习计算机知识的人呢都非常焦虑，以我本身的经验来说呢，我现在深度使用cursor这个编辑器，刚才我们说的Cursor它是一款基于VS code的支持AI的编辑器啊。那么在课程后面呢我们会和大家一起使用，我用它的深度体验了半年多啊，它的确实重塑了我整个编程生涯，让我的效率提升非常大。我手底下呢仿佛雇了10个初级程序员，我只需要最终review点点accept按钮就可以。

但是呢当你面对一个复杂的业务需求的时候，最难的部分呢往往不是刚才我们说的代码实现，而是理解需求设计架构，权衡技术方案。等等，也就是这个解决问题的过程，所以呢被替代的应该是那些没有学习能力，只会最基础的知识，没有全局思维的初级程序员。

所以我们必须在这个时代呢想尽办法提升自己的竞争力。好，那么说说呢为了提升竞争力，我们要学习什么?进行破局啊，也就是说呢我们要掌握怎样新的技能。我这里呢用这个前端工程师来举例，如果呢你要做一个面向未来的前端工程师，我认为呢你要掌握这几部分的内容：

第一个呢是我们要这个强化基础知识啊，我们要有这个Javascript/Typescript核心概念和掌握这个高级特性。

第二个呢是要学习呢最新的前前端这个现代前端框架。React或者Vue。

第三个要学习Electron桌面应用开发，因为呢Electron在未来呢肯定非常火热，现在呢很多对应的桌面应用啊都是用它来开发的。接来是使用AI大模型的能力，包括呢大模型API的调用。

还有呢这个多模型集成方案，因为现在有非常多系列大模型，怎样的把它们集成也是一个新的难题。第三个呢是AI增强型开发环境的应用。比如说cursor，等等集成AI功能编辑的高效使用，就是我说的，手底下仿佛有了10个工程师一样的效率利器啊，是未来呢必须要掌握的工具，最终呢实现一个提升系统设计的能力。

好，为了更好更生动的掌握这些知识点，我就设计了这门课程。

那么市面上呢，已经有比较多的集成一体的聊天工具。也就是说市面上现在有非常多的大模型，大家呢熟知的大模型应该有chat-gpt、deepseek、 豆包、百度的文心一言、阿里的通义千问等等，每个平台呢它都会有一个自己的聊天工具，我们希望呢通过一个软件呢把它们都集成起来，在一个软件中呢可以使用不同大模型进行问答。现在市面上已经有一些比较成熟的类似的软件，比如chat box，这里呢我们要做一个简化版，实现和它类似的功能，并且呢提升可扩展的设计，在未来呢可以接入各种各样的东西。

课程目录：

第1章 课前准备

• 1-1 课程导学_.mp4

第2章 未来已来，AI&跨平台桌面应用开发人才市场上需要求如何?

• 程序员会不会被取代?_.mp42-1AI 时代的职场变革，
• 2-2 程序员在 AI 时代的职业发展规划 .mp4
• 2-3 课程安排以及设计思路_.mp4

第3章【夯实基础】解锁 TypeScript 核心基础知识(选学，赠送)

• 3-1 什么是 Typescript 为什么要学习它.mp4
• 3-2安装Typescript,mp4
• 3-3,原始数据类型和 Any 类型.mp4
• 3-4,数组和元组.mp4
• 3-5.Interface-接囗 初探,mp4
• 3-6.函数.mp4
• 3-7,类型推论 联合类型和 类型断言.mp4
• 3-8枚举(Enum).mp4
• 3-9,泛型(Generics)第一部分,mp4
• 3-10 泛型(Generics)第二部分-约東泛型,mp4
• 3-11 新泛型第三部分-泛型在类和接口中的使用.mp4
• 3-12 类型别名，字面量 和 交叉类型 .mp4
• 3-13 声明文件 第一部分.mp4
• 3-14 声明文件 第二部分.mp4
• 3-15 内置类型,mp4
• 3-16 配置文件,mp4

第4章 【夯实基础】Vue3.4 基础与魅力(选学，赠送)

• 4-1 Wue3 本章导学.mp4
• 4-2 使用 vite 创建项目.mp4
• 4-3 文件结构以及推荐插件,mp4
• 4-4 ESLint 简介和初步使用,mp4
• 4-5 ESLint 配合 Vite 设置更多规则,mp4
• 4-6 响应式基础-Ref和 Reactive.mp4
• 4-7 computed 计算属性,mp4
• 4-8 watch 监听器.mp4
• 4-9 生命周期和模版引用.mp4
• 4-10 组件基础-厘性,mp4
• 4-11 组件自定义事件,mp4
• 4-12 组合式函数,mp4
• 4-13 创建useURLLoader.mp4
• 4-14 useURLLoader 第二部分 ,mp4
• 4-15 setup语法第一部分,mp4
• 4-16 setup 语法第二部分.mp4
• 4-17 依赖注入第一部分,mp4
• 4-18 依赖注入第二部分,mp4
• 4-19 vue3.4 3.5 更新简介.mp4

第5章【夯实基础】Electron 入门与基础知识

• 5-1 介绍与安装 Electron,mp4
• 5-2 创建第一个窗口.mp4
• 5-3 进程和线程,mp4
• 5-4 预加载脚本,mp4
• 5-5 进程间通信- 从渲染进程到主进程.mp4
• 5-6 进程通信- 双向通信.mp4
• 5-7 单向通信- 从主进程到渲染进程.mp4
• 5-8 使用 nodelntegration.mp4
• 5-9 使用 remote 模块.mp4
• 5-10 本章总结,mp4

第6章 【实战预热】撘建项目框架以及开发环境撘建

• 6-1 使用 Electron Forge 初始化项目.mp4
• 6-2 添加 vue3 支持.mp4
• 6-3 介绍和安装 Tailwind,css.mp4
• 6-4 学习 Tailwind.css 的基础知识.mp4
• 6-5 编写 ConversationList 组件,mp4
• 6-6 使用 lconify 作为图标解决方案.mp4
• 6-7 安装和初次认识 Radix Vue .mp4
• 6-8 ProviderList 组件编码第一部分,mp4
• 6-9 ProviderList 第二部分,mp4
• 6-10 ProviderSelect 第三部分.mp4

第7章 【项目实战:第一步】使用 Vue-Router 实现路由功能

• 7-1 安装并且使用 Vue Router,mp4
• 7-2 MessageList 组件编码.mp4
• 7-3使用useRoute和useRoutermp4
• 7-4 完成数据实时更新,mp4
• 7-5 Button编码第一部分.mp4
• 7-6 Button 组件编码第二部分.mp4
• 说明.zip

第8章 【项目实战:第二步】大模型入门与初步实践

• 8-1 大模型基础知识科普,mp4
• 8-2 初步使用文心一言调用 SDK,mp4
• 8-3 学习文心一言SDK第二部分:实现流式返回.mp4
• 8-4 学习使用阿里通义千问:了解 OpenAl SDK 的使用,mp4
• 8-5 使用qwen v 完成读图功能.mp4
• 8-6 使用 qwen long 完成文件上传以及文本处理_.mp4
• 说明.zip

第9章 【项目实战:第三步】使用 Dexie.js(IndexedDB)持久化数据

• 9-1 分析和选取存储的解决方案,mp4
• 9-2 学习 Dexie.js 的基本用法,mp4
• 9-3 信息创建第一部分.mp4
• 9-4 完成对话和信息的创建 第二部分.mp4
• 9-5 调用大模型并且返回数据 第一部分.mp4
• 9-6 调用大模型完成信息更新第二部分.mp4
• 9-7 调用大模型完成信息更新第三部分 实现流式更新 展现更完美的交豆,mp4

第10章【项目实战:第四步】使用 Pinia 完成应用状态管理

• 10-1 什么是Pinia 以及 State 基础概念,mp4
• 10-2学习 Pinia的actions 和 getters.mp4
• 10-3 改造 Message Store.mp4
• 10-4 使用 Pinia 创建应用的整体 store 分析应用数据 接入当前数据.mp4
• 10-5 使用 Pinia 替换 Dexie,js 的功能，实现高效的状态与持久化存储同步.mp4

第11章 【项目实战:第五步】应用进一步功能完善(markdown、法高亮、读图功能)

• 11-1 渲染 Markdown 文本.mp4
• 11-2 添加 Tailwind Typography 插件,mp4
• 11-3 使用Highlight.js 完成语法高亮.mp4
• 11-4 功能优化:自动滚动到信息的最下方.mp4
• 11-5 优化信息获取时的滚动优化.mp4
• 11-6 添加使用图片聊天功能 第一部分.mp4
• 11-7 发送图片信息编码第二部分,mp4
• 11-8 添加图片处理第三部分.mp4
• 11-9 图片处理第四部分-显示图片.mp4
• 11-10 添加读图功能 第五部分.mp4
• 11-11 重构不同模型返回数据方式,mp4
• 11-12 简介可选代对象,mp4
• 11-13 简介 generator 函数.mp4
• 11-14 学习使用异步可选代对象,mp4
• 11-15 重构通用模型-添加通用数据处理.mp4
• 11-16 最终实现通用模型类的重构,mp4
• 11-17 课后作业:添加 deepseek 大模型支持,mp4

第12章 【项目实战:第六步】Cursor编辑器自动生成代码，完成配置页面国际化

• 12-1添加配置页面器求分析,mp4
• 12-2 初识 Cursor 并使用它完成第一个需求的开发,mp4
• 12-3 使用Cusror 完成配置文件的后端开发的功能,mp4
• 12-4 完善设置页面-生成对应的表单以及更新功能.mp4
• 12-5 使用 Cursor Composer 开发国际化功能.mp4
• 12-6 使用 Cursor, 的读图功能完成模型界面的第一部分开发.mp4
• 12-7 使用 Cursor Composer 分步实现动态表单的功能,mp4
• 12-8 使用 Cursor 自动补全功能完成错误信息的添加以及开发,mp4
• 12-9 使用 AI 创建应用菜单 第一部分.mp4
• 12-10 使用 AI 完成顶部菜单功能 第二部分.mp4
• 12-11 使用 AI 完成上下文菜单删除对话.mp4

第13章【项目实战:第七步】使用Markers进行打包&使用CursorAI生成代码

• 13-1 应用打包 Markers 简介.mp4
• 13-2 使用package 命令生成可执行文件.mp4
• 13-3 探究生成的 asar 文件格式,mp4
• 13-4 使用 makers 生成安装包.mp4
• 13-5 使用 AI 完成应用的优化..mp4

第14章 【项目实战第八步】使用Publishers进行发布&Cursor实现自动更新功能

• 14-1 简介publish 的概念和优点.mp4
• 14-2 使用 Cursor 自动创建 Github Release_.mp4
• 14-3 完成应用自动更新功能 .mp4