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

解决什么问题与适用基础

这门课把 Electron 和 Vue 3.5 拼在一起，做的是一个可以跑在 Windows/macOS 上的 AI 聊天桌面应用。它解决的问题，不只是前端怎么调用接口，而是前端、状态、持久化和渲染全链路在桌面环境里怎么协同：消息流怎么存、Markdown 和代码高亮怎么渲染、图片怎么收发、模型响应怎么统一处理、配置页面怎么做国际化、最后怎么打包成可分发包。适合已经会用 Vue 3、了解 TypeScript 和基础前后端概念的人。如果你只会写页面、没接触过跨端打包或状态同步，建议先把 Vue 组合式 API、响应式原理、axios/fetch、路由和表单验证过一遍。

学习路径建议

先看状态与架构那几块：用 Pinia 建立整体 store，理解 actions、getters、State 基础，并且看如何用 Pinia 接管数据层，甚至替换 Dexie.js，实现状态与持久化的同步。再看渲染那几块：Markdown 文本的渲染、Tailwind Typography 插件的使用、Highlight.js 语法高亮的集成。接着是交互那几块：自动滚动到最新消息、滚动优化、图片信息的发送与显示流程。然后是数据层那几块：重构模型返回数据的方式、通用数据处理、异步可迭代对象和 generator 函数的用法。最后是工程化那几块：配置页面需求、国际化、上下文菜单与菜单结构、打包命令和 asar 文件格式的理解。这个顺序能把“功能能跑”和“功能好用”分开，避免一上来就调接口、乱贴依赖。

学完能做什么与配合练习

学完后，你能独立搭出一个支持多模型对话、支持 Markdown 输出和代码高亮、支持图片收发、支持本地持久化、支持配置与国际化、并且能打包的桌面应用骨架。配合练习时，先把项目跑起来，再按章节逐个复现：先用 Pinia 把状态统一，再做渲染层，再做数据层，最后做打包。资料里的章节结构适合对照实践，先把 store 写完，再接入模型，再做 UI 细节，再做配置页，最后看 asar 打包结果，保证每一步都有可见改动，而不是空看视频。