Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。
Electron官网上说: **“比你想象的更简单”** ————“如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。”
Vue 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。
我找到了一个插件:**vite-plugin-electron**,可以很方便的帮我们把 electron 和 vue 结合起来,开发起来非常方便。
目录结构设计
因为我们需要使用 Electron 和 vue 进行开发,因此我们把它们分开目录存储,基础目录结构如下:
- electron-main:主进程目录
- electron-preload:预加载代码目录,主要是定义桥接通信
- 其他文件:也就是 vue 初始化后的目录
目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。
初始化项目目录
下面就开始初始项目
yarn create vite electron-desktop --template vue-ts
先使用 vite 创建 vue 项目,然后我们再将 electron 嵌入到里面
初始化完成后,我们先做一个本地 yarn 源的配置,防止下载库的时候出现异常。
配置.yarnrc
registry "https://registry.npm.taobao.org/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"
配置完下载源后,就可以安装 electron 了
安装Electron
yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer
- electron-builder:打包工具
- rimraf:快速删除文件或目录工具
- vite-plugin-electron:vite 结合 electron 的库,关于这个插件可以参见 Vite 与 Electron 无缝衔接
- electron-devtools-installer:electron 开发工具
vite-plugin-electron 插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。