利用流行的前端开发框架来开发桌面应用。


2019 桌面软件开发指北(一) 关于 Electron

2019 桌面软件开发指北(二) Electron 快速上手 - Hello World!

2019 桌面软件开发指北(三) Electron 项目管理


Electron 与 Vue.js

关于Vue

Vue 和 React 是新一代 Web 前端应用开发框架的代表。 它们都采用组件化开发方式,并具有优秀的状态管理,以及丰富的支持库/第三方插件。 使用它们无疑能在项目规模逐渐增大时,使开发工作更可控。

使用 Vue 可以实现简单的单页面应用。 如果页面逻辑开始变得复杂,可以引入 Vuex 来管理多个组件之间共享的状态数据。 多页面应用需要用到 vue-router。

  • 一个官方的示例应用例子 Electrify

创建 Vue 应用

提前安装 vue-cliyarn global add @vue/cli

先创建一个 Vue 应用。

vue create myapp

创建过程中,选择默认配置即可。 这是一个可以在浏览器中打开的网页应用。 我们的目的是把这个应用迁移为桌面应用

进入 myapp 目录(cd myapp/),执行 yarn serve。 在浏览器打开 http://127.0.0.1:4000,可以看到默认的 Vue.js 项目界面。

我们直接对这个 App 进行修改,暂时不做界面改动或增加新的功能。

将 Vue 应用改造为 Electron 应用

第一步:渲染进程

首先修改目录结构,将 vue 应用的 src/ 目录下代码移动到 src/renderer/ 目录下。

mkdir src/renderer && git mv src/App.vue src/assets/ src/components src/main.js src/renderer/

然后在项目根目录下增加一个 vue.config.js。 代码参考此 Gist

然后,重新执行 yarn serve,在浏览器中验证可以正常打开。

第二步:主进程

参考在 “Electron 快速上手 - Hello World!” 中进行的工作, 将主进程相关代码组织到 src/main/ 目录下,并在该目录创建 index.js 文件(代码参看 这里)。

mkdir src/main/ && touch src/main/index.js
第三步:配置 Electron 项目

添加 Electron 依赖

yarn add -D electron electron-builder electron-webpack electron-webpack-vue

配置命令

  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
  }
最后一步:💥成功运行!💥

运行上一步配置的 dev 命令,看一下效果。

yarn dev

electron vue screenshot

可以看到 Electron 正确加载了我们的 Vue 应用。

可以注意到伴随应用窗口,还打开了开发者工具窗口。 不用担心,开发者工具窗口只会在开发模式中出现。

制作安装包

Electron 方案的一大优势是跨平台,使用 electron-builder 能够简单的完成打包工作。

打包流程中,webpack 几乎是标配,将代码和依赖库打包在一起,从而减少文件大小。

如果要包含调试工具,需要添加 source-map-support

yarn add -O source-map-support

修改 package.json。 添加:

{
  "build": {
    "files": [
      "!node_modules/source-map-support/**/*",
      "node_modules/source-map-support/source-map-support.js"
    ]
  }
}

然后针对当前系统平台打包:

yarn dist