Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。,Electron官网上说：“比你想象的更简单”————“如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”,Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。,我找到了一个插件：vite-plugin-electron，可以很方便的帮我们把 electron 和 vue 结合起来，开发起来非常方便。,因为我们需要使用 Electron 和 vue 进行开发，因此我们把它们分开目录存储，基础目录结构如下：,目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构，目前还没有提供设置修改。,下面就开始初始项目：,先使用 vite 创建 vue 项目，然后我们再将 electron 嵌入到里面。,初始化完成后，我们先做一个本地 yarn 源的配置，防止下载库的时候出现异常。,配置完下载源后，就可以安装 electron 了。,vite-plugin-electron 插件是将 vite 和 electron 结合在一起的，可以让我们非常方便的结合 electron 和 vue，需要做一些指定的配置。,可以参考 electron 官网的快速开始项目。,需要注意引入的预加载文件应该是打包后的 js 文件，路径和 ts 文件路径相同，只要类型改为 js 即可。,在预加载文件中我们打印一下系统平台。,在 tsconfig.json 中监听 electron 相关文件和提示。,配置主进程和预加载脚本地址。,主要是增加入口文件，因为 electron 还没有原生支持 ts，因此目前还是必须加载 js 文件，所以入口文件我们配置为解析后的 js 文件路径：,dist/electron-main/index.js，然后修改执行脚本，在 build 命令中增加 electron-builder 打包命令。,electron-builder 的配置我们有一篇专门的文章介绍，这里并没有什么特殊的配置，按照需求配置即可。,到这里就配置好了所有的文件，接下来我们执行开发命令看一看效果。,然后我们执行打包命令看一看效果。,执行完后会生成两个目录：dist 和 release。,dist 目录中生成的是前端打包文件，release 中生成的是 electron 打包文件，内容如下：,其中 win-uppacked 中生成的是无需安装的执行文件，将此目录直接压缩后就可以发送给别人，解压即可使用。ExectronVueVite_1.0.0.exe 文件是安装包，打开会显示安装过程，执行完安装过程后在系统的控制面板中的软件列表中可以看到该软件，也可以执行卸载。,打开后就是正常的软件界面。,我们创建好了项目结构，那么在使用 Vue 开发 Electron 桌面应用的时候还有一个比较重要的知识点要了解，就是消息通信。在新版本的 electron 中，推荐使用上下文隔离方式进行内部进程通信，electron 官网有很详细的介绍和示例，这里我们只介绍一种方式，其他的方式大家可以通过查看官网示例来了解。,我们的示例是在 Vue 界面中显示当前系统平台。,在 electron-preload/index.ts 中添加如下代码：,通过 electron 注册的上下文隔离接口会添加给 window 对象，但是原始的 window 对象并不存在这些接口和属性，ts 就会报错，这时就需要我们为其编写ts类型声明文件.d.ts。,我们在 App.vue 中调用window.electronAPI.platform 接口，把系统平台信息显示在界面上。,执行完以上步骤后，运行项目看一下效果。,
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">