01
天
21
时
17
分
41
秒
首页 实战
收藏

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

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

已完结
|
难度：中级
|
时长：共 18 小时
新课榜第 5 名
优惠到手 ￥269
原价￥299.00
满599减100 满299减30
距离活动结束
1天
:
21
:
17
:
37
立即购买
加购物车
已有 108 人在学
  • ４大经典AI大模型实战
  • 跨平台AI聊天应用全流程
  • Cursor辅助编程N倍提效
  • 慕课网名师“保姆式”教学
  • Vue3与Electron整套技术
  • 主流技术+AI 技术实战经验
试看本节课 11:16
试看本节课 08:16
试看本节课 10:26
1-1 课程导学
2-1 AI 时代的职场变革， 程序员会不会被取代？
5-2 创建第一个窗口
检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
本课程将由慕课网名师采用最新前端技术栈 ：Vue3.5 、 Electron、TS、 Vite、Pinia、Radix Vue、IndexedDB、 Dexie.js ，与多种知名AI大模型（文心一言/通义千问/ Claude ／Deepseek），手把手带你开发一个跨平台的 AI 桌面聊天应用，同时教你用Cursor辅助开发倍速提升开发效率。无论你是初涉 AI 领域的新手，还是渴望突破前端技能瓶颈的进阶者，这门课程都将助力你构建未来核心竞争力，让你在 AI 浪潮中抢占先机 。
展开所有

本章介绍：

介绍课程内容，学习建议和注意事项。演示课程项目，让学员有一个整体的认识。

第1章 课前准备
1 节｜12分钟
展开
  • 视频：
    1-1 课程导学
    试看
    11:16

本章介绍：

本章探寻了 AI 时代的工作环境的变化，程序员未来工作的职业前景以及本课程的规划。

第2章 未来已来，AI&跨平台桌面应用开发人才市场上需要求如何？
3 节｜25分钟
收起
  • 视频：
    2-1 AI 时代的职场变革， 程序员会不会被取代？
    试看
    08:16
  • 视频：
    2-2 程序员在 AI 时代的职业发展规划
    08:58
  • 视频：
    2-3 课程安排以及设计思路
    07:29

本章介绍：

本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，带领大家学习 TS 中的各种基础类型，然后进阶到复杂类型，包括：Array, Tuple, interface, function, Class, Enum, Generices等，迅速帮助大家理解 TS 的基础使用方式和语法。

第3章 【夯实基础】解锁 TypeScript 核心基础知识（选学，赠送）
16 节｜135分钟
收起
  • 视频：
    3-1 什么是 Typescript 为什么要学习它
    09:52
  • 视频：
    3-2 安装 Typescript
    06:06
  • 视频：
    3-3 . 原始数据类型和 Any 类型
    06:07
  • 视频：
    3-4 . 数组和元组
    06:55
  • 视频：
    3-5 . Interface- 接口 初探
    05:40
  • 视频：
    3-6 . 函数
    07:37
  • 视频：
    3-7 . 类型推论 联合类型和 类型断言
    07:48
  • 视频：
    3-8 枚举（Enum）
    07:41
  • 视频：
    3-9 . 泛型（Generics） 第一部分
    07:46
  • 视频：
    3-10 泛型（Generics） 第二部分 - 约束泛型
    07:06
  • 视频：
    3-11 新泛型第三部分 - 泛型在类和接口中的使用
    11:16
  • 视频：
    3-12 类型别名，字面量 和 交叉类型
    07:11
  • 视频：
    3-13 声明文件 第一部分
    13:34
  • 视频：
    3-14 声明文件 第二部分
    10:43
  • 视频：
    3-15 内置类型
    08:36
  • 视频：
    3-16 配置文件
    10:43

本章介绍：

从 vite 创建项目开始，学习使用一系列插件以及 ESlint打造完美开发环境，接下来带领大家学习 compostion API，自定义Hooks， setup 语法， 依赖注入等一系列 vue3 的重大更新。

第4章 【夯实基础】Vue3.4 基础与魅力（选学，赠送）
19 节｜204分钟
展开
  • 视频：
    4-1 Vue3 本章导学
    02:57
  • 视频：
    4-2 使用 vite 创建项目
    07:43
  • 视频：
    4-3 文件结构以及推荐插件
    13:04
  • 视频：
    4-4 ESLint 简介和初步使用
    11:12
  • 视频：
    4-5 ESLint 配合 Vite 设置更多规则
    12:45
  • 视频：
    4-6 响应式基础 - Ref 和 Reactive
    13:08
  • 视频：
    4-7 computed 计算属性
    08:30
  • 视频：
    4-8 watch 监听器
    13:41
  • 视频：
    4-9 生命周期和模版引用
    11:40
  • 视频：
    4-10 组件基础-属性
    15:02
  • 视频：
    4-11 组件自定义事件
    08:57
  • 视频：
    4-12 组合式函数
    10:52
  • 视频：
    4-13 创建 useURLLoader
    14:41
  • 视频：
    4-14 useURLLoader 第二部分
    08:52
  • 视频：
    4-15 setup语法第一部分
    05:40
  • 视频：
    4-16 setup 语法第二部分
    10:15
  • 视频：
    4-17 依赖注入第一部分
    11:17
  • 视频：
    4-18 依赖注入第二部分
    11:18
  • 视频：
    4-19 vue3.4 3.5 更新简介
    11:33

本章介绍：

本章讲述了 Electron 的基础用法，包括搭建 Electron 开发环境、进程和线程的知识、BrowserWindow 模块、跨进程访问等内容。

第5章 【夯实基础】Electron 入门与基础知识
10 节｜102分钟
展开
  • 视频：
    5-1 介绍与安装 Electron
    07:57
  • 视频：
    5-2 创建第一个窗口
    试看
    10:26
  • 视频：
    5-3 进程和线程
    10:01
  • 视频：
    5-4 预加载脚本
    12:12
  • 视频：
    5-5 进程间通信- 从渲染进程到主进程
    12:34
  • 视频：
    5-6 进程通信- 双向通信
    13:56
  • 视频：
    5-7 单向通信- 从主进程到渲染进程
    08:59
  • 视频：
    5-8 使用 nodeIntegration
    08:41
  • 视频：
    5-9 使用 remote 模块
    07:47
  • 视频：
    5-10 本章总结
    08:32

本章介绍：

本章完成项目基础架构的搭建，使用 Electron Forge 作为脚手架，分析建立项目的静态版本，并且学习和使用 Tailwind.css 完成样式，最后引入 Radix Vue 作为项目的组件库。

第6章 【实战预热】搭建项目框架以及开发环境搭建
10 节｜121分钟
展开
  • 视频：
    6-1 使用 Electron Forge 初始化项目
    09:58
  • 视频：
    6-2 添加 vue3 支持
    06:13
  • 视频：
    6-3 介绍和安装 Tailwind.css
    12:09
  • 视频：
    6-4 学习 Tailwind.css 的基础知识
    15:41
  • 视频：
    6-5 编写 ConversationList 组件
    13:26
  • 视频：
    6-6 使用 Iconify 作为图标解决方案
    12:46
  • 视频：
    6-7 安装和初次认识 Radix Vue
    12:52
  • 视频：
    6-8 ProviderList 组件编码第一部分
    10:49
  • 视频：
    6-9 ProviderList 第二部分
    15:47
  • 视频：
    6-10 ProviderSelect 第三部分
    10:45

本章介绍：

本章学习使用 Vue Router 创建多个页面并且完成在不同页面中的跳转功能。

第7章 【项目实战：第一步】使用 Vue-Router 实现路由功能
6 节｜82分钟
展开
  • 视频：
    7-1 安装并且使用 Vue Router
    11:16
  • 视频：
    7-2 MessageList 组件编码
    16:58
  • 视频：
    7-3 使用useRoute 和 useRouter
    11:52
  • 视频：
    7-4 完成数据实时更新
    13:57
  • 视频：
    7-5 Button编码第一部分
    15:41
  • 视频：
    7-6 Button 组件编码第二部分
    11:50

本章介绍：

本章介绍了目前市面上大模型的种类以及使用百度和阿里的大模型完成 SDK 的安装以及使用的简单 Demo

第8章 【项目实战：第二步】大模型入门与初步实践
6 节｜75分钟
展开
  • 视频：
    8-1 大模型基础知识科普
    10:35
  • 视频：
    8-2 初步使用文心一言调用 SDK
    13:26
  • 视频：
    8-3 学习文心一言SDK 第二部分：实现流式返回
    11:27
  • 视频：
    8-4 学习使用阿里通义千问：了解 OpenAI SDK 的使用
    16:08
  • 视频：
    8-5 使用qwen vl 完成读图功能
    12:02
  • 视频：
    8-6 使用 qwen long 完成文件上传以及文本处理
    11:06

本章介绍：

本章分析目前 Electron 常用的存储方案，最终选用 Dexie.js 并且学习 Dexie 的用法以及初始化它的数据结构 最后完成流式信息的返回以及展示同时进一步优化返回内容。

第9章 【项目实战：第三步】使用 Dexie.js (IndexedDB)持久化数据
7 节｜93分钟
展开
  • 视频：
    9-1 分析和选取存储的解决方案
    08:14
  • 视频：
    9-2 学习 Dexie.js 的基本用法
    14:23
  • 视频：
    9-3 信息创建第一部分
    20:05
  • 视频：
    9-4 完成对话和信息的创建 第二部分
    12:55
  • 视频：
    9-5 调用大模型并且返回数据 第一部分
    16:17
  • 视频：
    9-6 调用大模型完成信息更新第二部分
    11:12
  • 视频：
    9-7 调用大模型完成信息更新第三部分 实现流式更新 展现更完美的交互
    09:09

本章介绍：

本章学习使用 Pinia 的概念，基础知识，最终使用 Pinia 创建全局Store 并且将 Dexie 融汇在其中。

第10章 【项目实战：第四步】使用 Pinia 完成应用状态管理
5 节｜76分钟
展开
  • 视频：
    10-1 什么是Pinia 以及 State 基础概念
    14:10
  • 视频：
    10-2 学习 Pinia 的 actions 和 getters
    16:01
  • 视频：
    10-3 改造 Message Store
    13:39
  • 视频：
    10-4 使用 Pinia 创建应用的整体 store 分析应用数据 接入当前数据
    16:09
  • 视频：
    10-5 使用 Pinia 替换 Dexie.js 的功能，实现高效的状态与持久化存储同步
    15:24

本章介绍：

本章完成代码和功能的进一步完善，支持 markdown 以及语法高亮，还完成了用户体验的改进，增加了读图功能，以及抽象了 Provider 的代码和使用。

第11章 【项目实战：第五步】应用进一步功能完善（markdown、法高亮、读图功能）
17 节｜196分钟
展开
  • 视频：
    11-1 渲染 Markdown 文本
    11:30
  • 视频：
    11-2 添加 Tailwind Typography 插件
    09:35
  • 视频：
    11-3 使用Highlight.js 完成语法高亮
    09:50
  • 视频：
    11-4 功能优化：自动滚动到信息的最下方
    09:54
  • 视频：
    11-5 优化信息获取时的滚动优化
    09:23
  • 视频：
    11-6 添加使用图片聊天功能 第一部分
    16:51
  • 视频：
    11-7 发送图片信息编码第二部分
    18:07
  • 视频：
    11-8 添加图片处理第三部分
    16:02
  • 视频：
    11-9 图片处理第四部分 - 显示图片
    17:09
  • 视频：
    11-10 添加读图功能 第五部分
    10:27
  • 视频：
    11-11 重构不同模型返回数据方式
    12:41
  • 视频：
    11-12 简介可迭代对象
    09:03
  • 视频：
    11-13 简介 generator 函数
    08:39
  • 视频：
    11-14 学习使用异步可迭代对象
    06:58
  • 视频：
    11-15 重构通用模型 - 添加通用数据处理
    08:12
  • 视频：
    11-16 最终实现通用模型类的重构
    12:16
  • 视频：
    11-17 课后作业：添加 deepseek 大模型支持
    08:47

本章介绍：

本章完成应用的配置页面，全部使用 Cursor AI 编辑器，由浅入深的自动完成编码，实现对应的功能：配置页面，国际化，动态配置设置的功能。

第12章 【项目实战：第六步】 Cursor编辑器自动生成代码，完成配置页面国际化
11 节｜131分钟
展开
  • 视频：
    12-1 添加配置页面需求分析
    06:50
  • 视频：
    12-2 初识 Cursor 并使用它完成第一个需求的开发
    14:12
  • 视频：
    12-3 使用Cusror 完成配置文件的后端开发的功能
    07:29
  • 视频：
    12-4 完善设置页面- 生成对应的表单以及更新功能
    13:08
  • 视频：
    12-5 使用 Cursor Composer 开发国际化功能
    12:05
  • 视频：
    12-6 使用 Cursor. 的读图功能完成模型界面的第一部分开发
    07:29
  • 视频：
    12-7 使用 Cursor Composer 分步实现动态表单的功能
    16:43
  • 视频：
    12-8 使用 Cursor 自动补全功能完成错误信息的添加以及开发
    14:53
  • 视频：
    12-9 使用 AI 创建应用菜单 第一部分
    12:27
  • 视频：
    12-10 使用 AI 完成顶部菜单功能 第二部分
    12:38
  • 视频：
    12-11 使用 AI 完成上下文菜单删除对话
    12:10

本章介绍：

本章节讲解使用 Markers 对应用进行打包& 使用 Cursor AI 生成代码，完成应用图标的功能

第13章 【项目实战：第七步】使用Markers进行打包&使用CursorAI生成代码
5 节｜45分钟
展开
  • 视频：
    13-1 应用打包 Markers 简介
    07:27
  • 视频：
    13-2 使用package 命令生成可执行文件
    09:29
  • 视频：
    13-3 探究生成的 asar 文件格式
    07:01
  • 视频：
    13-4 使用 makers 生成安装包
    12:13
  • 视频：
    13-5 使用 AI 完成应用的优化
    08:22

本章介绍：

本章节讲解使用 Publishers 进行应用发布 & 使用 Cursor AI编码实现自动更新功能 。

第14章 【项目实战第八步】使用Publishers进行发布&Cursor实现自动更新功能
3 节｜28分钟
展开
  • 视频：
    14-1 简介publish 的概念和优点
    06:10
  • 视频：
    14-2 使用 Cursor 自动创建 Github Release
    09:25
  • 视频：
    14-3 完成应用自动更新功能
    11:55
本课程已完结
适合人群
软件开发人员
积累AI项目经验者
做毕设的大学生
技术储备
熟悉 HTML CSS JS
环境参数
Vue 3.5
Typescript 5.5 +
Electron 34.0 +
张轩
高级前端工程师， 已有50896个学生
其他课程： 《低代码全栈项目实战 商业级海报编辑器全流程落地》 《进阶必学，打造媲美ElementPlus的组件库》、 《React18+TS高仿AntD从零到一打造组件库》、
全部

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

不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
果不然给了 好评
老师讲课：专业且通俗易懂，条理清楚，发音标准。难得的好课程，相见恨晚！！！
查看更多
数据加载中...
查看更多好课
《Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战》的真实评价
内容实用：
10.00分
通俗易懂：
10.00分
逻辑清晰：
10.00分
综合评分：10.00分，共 1 人参与
果不然
给了 好评
老师讲课：专业且通俗易懂，条理清楚，发音标准。难得的好课程，相见恨晚！！！
篇幅原因，只展示最近100条评价
优惠到手¥299.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号