[14章附电子书]Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战

/s/1bLU1ppjSmsAYBpI_4J_l0A 提取码: y6st

前言： Electron是一个基于Chromium和Node.js，可以使用HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容Mac、Windows和 Linux。虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以方便地读写本地文件、发起跨域请求、调用更多系统资源，再加上Web开发低成本、高效率的优势，这种方式越来越受到开发者的喜爱。

综合考虑多方面因素，最终选择electron-vite作为本教程的主角。electron-vite现已推出1.x正式版，虽然没有被Electron和Vite官方提到，但经过实战，体验还是不错的。在省去了手动融合Electron和Vite繁琐过程的同时，还实现了V8字节码、主进程和预加载脚本热更新等非常实用的功能，要比自己从头搭建容易得多。

一、electron的进程 electron有个很重要的概念就是进程和进程间通信，科学详细的描述请查阅官网，这里说下简单的理解：

electron分为主进程和渲染进程，主进程负责和系统级数据交互，所以需要借助nodejs或者jdk等环境，渲染进程主要负责渲染页面展示，所以需要借助浏览器环境。

正常情况下，出于安全考虑，浏览器是不可以直接操控系统底层数据的，否则咱们随便浏览个网页，就被人家植入木马或者读取电脑的关键数据了。而electron的进程通信，就是提供一种安全的通道，让浏览器环境中的渲染进程可以访问node环境中的主进程。这个通道，在electorn中被称为IPC通道。

==其实我们不用特别地深究进程通信的概念==，进程通信听着很麻烦，也只能说明它的实现源码可能会不太简单，但是作为一个成熟的框架，==进程通信在我们的代码中使用，却极为简单。==

主进程是main.js这毫无疑问，前端页面和主进程的通信需要通过预加载脚本preload.js，预加载脚本就是一个桥梁。

二、安装electron 安装electron-icon-builder图标生成工具，终端运行 npm i electron-icon-builder，最好使用该工具生成图标，它会生成不同尺寸的图标以及ico和苹果的icns图标，这个工具生成的图标不会出现异常情况，我在网上搜的在线转ico工具打包后的图标会出现问题。

执行以上两个安装后，在package.json文件中查看是否存在以下代码，没有的话在scripts下加上，须resources目录中放一张png图，例如icon.png，图标生成工具就会以这张图为基础生成各种尺寸图标

三、功能分析： 1、记录待完成任务和已完成任务 2、通过新建，添加待完成任务，并设置时间 3、点击完成任务，跳转到已完成界面；点击删除，可以删除任务 4、点击右上角的 × 按钮，可以关闭主界面，要再次打开主界面，可以通过系统托盘 5、设定的时间到了，会在右下角弹出提醒框

四、项目搭建 Vue CLI Plugin Electron Builder 是基于Vue Cli的，因此项目的搭建非常方便。

创建vue项目 首先，安装：npm i @vue/cli -g

接着，创建项目：vue create tasky-vue

运行该命令后，会有一系列选择项让我们进行选择，在我们这个项目中，选择如下： module.exports = { //多页面打包 pages: { main: { // 入口js entry: 'src/modules/main/main.js', // 模板来源 template: 'public/main.html', // 在 dist 中生成的html文件名字 filename: 'main.html', // template html 中的 title 标签需要是 title: 'Main Page' }, remind: { entry: 'src/modules/remind/remind.js', template: 'public/remind.html', filename: 'remind.html', title: 'Remind Page' } } }

五、预加载脚本（preload） 为了让渲染进程与主进程进行通信从而形成一个整体，预加载脚本的作用就是他们之间的桥梁。预加载脚本与渲染进程共享同一个全局window，因此可以通过window来传递数据。但并不是简单地通过给window添加属性就能使用，以下方式是无法把preload.js共享给渲染进程使用的：

// 预加载脚本（preload.js） window.myAPI = { desktop: true }

// 渲染进程 console.log(window.myAPI) // => undefined（获取不到） 这是因为Electron的语境隔离（Context Isolation），使得预加载脚本与渲染进程的主要运行环境是隔离的，以避免将任何API都加入到渲染进程的网页中。

最后是几个配置选项：

? Add TypeScript? » No / Yes
是否使用TypeScript？选No，本教程使用JavaScript。如果喜欢TypeScript，请选择Yes。 ? Add Electron updater plugin? » No / Yes 是否添加Electron updater插件？选择Yes。 ? Enable Electron download mirror proxy? » No / Yes 是否开启Electron镜像下载代理。在国内网络环境，强烈建议选择Yes。