Vue3+Electron+Cursor实战：手把手打造跨平台AI聊天应用

为什么前端工程师要在AI时代重新规划职业路线

「AI会不会取代程序员」已经成为悬在许多开发者头上的焦虑。B站UP主张轩老师在这套实战课程的开篇给出了自己的判断：AI带来的不是威胁，而是一次重塑工作方式的机遇。它真正帮助开发者摆脱的是重复性的基础编码，让人把精力转向理解需求、设计架构、权衡技术方案这些更有价值的环节。

按照他的说法，深度使用Cursor半年多之后，整个编程体验被重新定义——「我手底下仿佛雇了10个初级程序员，我只需要最终review、点点accept按钮就可以」。这句话虽然带有调侃，但也精准地指向了一个事实：真正会被淘汰的，是那些没有学习能力、只会最基础知识、缺乏全局思维的初级角色，而不是具备系统设计能力的工程师。

在这个时代想尽办法提升竞争力

基于这个判断，课程把「面向未来的前端工程师」拆成了几块核心能力：扎实的JavaScript/TypeScript核心与高级特性、现代框架（React或Vue）、Electron桌面应用开发、大模型API调用与多模型集成，以及Cursor、Windsurf等AI增强型编辑器的高效使用。最终目标是把能力拉到系统架构和设计层面。

项目目标：一个集成四大模型的桌面聊天应用

课程的落地项目是一个跨平台AI桌面聊天应用——相当于一个简化版的ChatBox。核心诉求很直接：市面上ChatGPT、DeepSeek^广告、豆包、Kimi、文心一言、通义千问^广告各有各的聊天入口，为什么不把它们集成到同一个软件里，在一个界面中切换不同大模型进行问答？

从演示来看，这个应用已经具备了比较完整的交互能力：

左侧为对话列表，支持新建和切换会话
支持文心一言、通义千问、OpenAI、DeepSeek多种模型切换
使用通义千问VL-Plus等多模态模型可以识别图片内容（演示中成功识别出金毛寻回犬）
代码问答带语法高亮
配置页面可切换主题、主题色、语言
模型设置页可添加、启用或关闭不同模型

应用支持多种大模型切换

这种「可扩展设计」是重点所在——不是写死几个接口，而是预留了接入更多大模型的能力，这也更贴近真实的工程需求。

技术栈拆解：全链路的现代前端选型

这套应用几乎把当下前端加AI的热门技术点串了个遍，技术选型值得单独拆开看。

前端层

Vue 3.5：使用最新特性与最佳实践
TypeScript：全程接入，强化类型安全
Vite：作为构建工具
Pinia：负责状态管理
Tailwind CSS：处理样式
Radix Vue：组件库
markdown-it：负责内容处理与渲染

AI集成层

模型方面集成了文心一言、通义千问和DeepSeek三家国产主力模型，并通过一个AI Service Layer统一管理。

集成通义千问与DeepSeek等模型

多模型集成的关键挑战在于不同服务商的API接口格式并不统一。文心一言（百度）、通义千问（阿里）、DeepSeek各有各的鉴权方式、请求结构和流式响应格式。课程中的AI Service Layer（AI Manager）解决的正是这个问题——通过统一的抽象层将各家差异屏蔽掉，对上层组件暴露一致的调用接口，这是经典的**适配器模式（Adapter Pattern）**在工程实践中的应用。多模态模型（如通义千问VL系列）与纯文本模型的最大差异在于输入格式：多模态接口支持在消息中混入图片数据（通常是Base64编码或图片URL），模型在理解文字指令的同时可以分析图像内容。这类能力在客服、文档解析、图表问答等场景中已有广泛的商业落地。

Electron桌面端

Electron 30：最新主版本
Electron Forge：脚手架与打包工具
IndexedDB + Dexie.js：本地存储解决方案

整体架构被划分为三部分：主进程通过IPC Main与渲染进程的IPC Renderer通信，渲染层用Radix Vue渲染界面并借助IndexedDB存储数据；接入AI的部分由AI Manager统一管理多个AI Provider（通义千问、文心一言、DeepSeek），同时保留Custom AI的扩展位，向外对接External Services。这是一张相当经典的Electron应用架构图，对理解主进程与渲染进程的职责分离很有参考价值。

Electron的核心设计是将Chromium浏览器内核与Node.js运行时捆绑在一起，使Web技术可以开发原生桌面应用。它的架构天然分为两个进程：**主进程（Main Process）**负责管理应用生命周期、创建窗口、调用操作系统原生API；**渲染进程（Renderer Process）**本质上是一个Chromium标签页，负责渲染界面。两者之间通过IPC（Inter-Process Communication，进程间通信）机制传递消息——主进程监听ipcMain事件，渲染进程通过ipcRenderer发送请求，这是Electron开发中最核心的协作模式。这种隔离设计的意义在于安全性和稳定性：渲染进程不能直接访问文件系统或网络底层，必须通过主进程代理，避免了Web页面被恶意代码直接操控系统资源的风险。Electron Forge则是官方推荐的脚手架工具，负责项目初始化、开发调试和最终打包为Windows/macOS/Linux安装包的全流程。

渐进式教学：先手写，后用AI

整套课程最值得说的是它的教学理念——不是一上来就让你用AI堆代码，而是采用「渐进式」方案：项目前期纯手写，后期才引入Cursor辅助。

张轩老师给出的理由很有说服力。在项目初期，开发者需要理解整个项目的架构、掌握各模块之间的关系，建立对代码的直觉认知。只有对项目有了深入了解，你才知道哪些部分适合交给AI、如何向AI准确描述需求。到了后期，当整个架构已经了然于胸，再用Cursor处理那些有难度、需要大量查阅文档的部分，AI才能真正发挥价值，这才符合AI的最佳实践。

先理解项目架构，再引入AI辅助

他用了一个贴切的比喻：就像学开车，需要先理解驾驶原理，然后才能更好地使用各种辅助驾驶功能。这个「先理解、后使用」的逻辑，恰恰是很多AI编程教程最容易忽视的一环——过早依赖AI反而会让人失去对代码的掌控力。

Cursor是基于VS Code深度改造的AI增强型代码编辑器，其核心能力是将大语言模型直接嵌入编码工作流。它的Composer/Agent模式允许开发者用自然语言描述需求，由AI自动生成、修改甚至跨文件重构代码，并以差异对比（diff）的形式呈现变更供开发者审阅后按Accept接受。与GitHub Copilot的逐行补全不同，Cursor更擅长处理「在现有项目基础上完成某个功能」的上下文感知任务——它会自动读取当前工程结构和相关文件。这也解释了为什么课程强调「先手写理解架构再用AI」：Cursor的质量高度依赖你给出的上下文和指令精确度，对项目一无所知的人很难写出有效的提示词，反而会在AI生成的代码中迷失方向。

学习前提与最终收获

课程的入门门槛并不高，只需要两点基础：

掌握HTML、CSS、JavaScript等前端基础知识
有Node.js与npm的使用经验

课程本身还赠送了TypeScript核心概念、Vue 3.5新特性、Electron跨平台开发基础这三部分内容，熟悉的同学可以跳过，但基础薄弱的建议补齐——「基础决定上限」。

学完的收获可以归纳为四条主线：掌握Vue 3与Electron的整套最新技术；完成四大经典AI大模型的实战，并深入多模型集成方案；通过Cursor辅助编程实现成倍提效；最终把能力拉升到系统架构与设计层面，向「架构师」方向迈进。

对于正在观望AI时代前端出路的开发者来说，这套课程提供了一个相对务实的样本：它既不盲目鼓吹AI替代一切，也不回避AI带来的效率变革，而是把重点放在「人如何与AI协作」这件事上。这或许才是当下更应该掌握的核心竞争力。