缘起
上文简单介绍了 Electron，以及如何搭建环境来进行开发。现实开发中，从头开始使用 HTML5、JS、CSS 来构建应用毕竟还是一件苦差事。鉴于 Vue 是目前国内前端开发的主流技术栈之一，本文来趟一下如何使用 Vue 开发 Electron 桌面应用这个坑，减少一些大家搭建环境中可能会碰到的问题。
设置 npm 国内源
以下命令设置 npm 到国内的淘宝源地址。
$ npm config set registry https://registry.npm.taobao.org
验证一下：
$ npm config get registry
https://registry.npm.taobao.org
如果看到输出是 https://registry.npm.taobao.org，这表明设置成功的。
参考： npm配置国内源方法
设置 Electron 国内源
Windows
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
Mac
- bash
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.bash_profile
. ~/.bash_profile
- zsh
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.zshrc
. ~/.ashrc
安装 yarn【可选】
本文将使用 yarn 作为 Node.js 的包管理器。至于 npm 与 yarn 孰优孰劣，则仁者见仁、智者见智，不便评说。
官方推荐的安装 yarn 的命令如下：
$ npm install -g yarn
笔者在 Mac 上是使用 homebrew 安装的 yarn：
$ brew install yarn
目前的最新版本是 1.22.5。
$ yarn -v
1.22.5
homebrew 的国内源设置请参考 清华大学Homebrew/Linuxbrew 镜像使用帮助。
安装 Vue CLI
本文将通过 Vue CLI 来安装 Vue.js，其他的安装方式可以参考官方的 Vue Installation。
$ yarn global add @vue/cli
yarn global v1.22.5
[1/4] 🔍 Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request > har-validator@5.1.5: this library is no longer supported
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "@vue/cli@4.5.4" with binaries:
- vue
✨ Done in 43.85s.
可以看到，当前 Vue CLI 的最新版本是 4.5.4。
$ vue --version
@vue/cli 4.5.4
注： Windows 下面推荐使用 npm 安装，否则有一定概率 vue 命令无法识别。 安装命令如下：
$ npm install -g @vue/cli
生成 vue 工程
使用 vue create 命令创建工程，选项保持默认（使用 vue 2）即可。
$ vue create electron-vue-demo
🎉 Successfully created project electron-vue-demo.
👉 Get started with the following commands:
$ cd electron-vue-demo
$ npm run serve
验证 vue 工程
$ cd electron-vue-demo
$ npm run serve
DONE Compiled successfully in 2379ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.5:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
通过浏览器范围访 http://localhost:8080/，如果看到下图，说明工程创建成功。
vue-create-ok.png
添加 electron-builder 支持
$ vue add electron-builder
✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
Mac 系统下，如果该命令执行时间过长，可以尝试下面的命令：
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" vue add electron-builder
运行开发版
执行以下命令，启动 dev server。
$ yarn electron:serve
或者
$ npm run electron:serve
运行的效果：
electron-builder-demo.png
打包
执行以下命令，进行打包：
$ yarn electron:build
OR
$ npm run electron:build
如果再 Mac 系统下，首次打包缓慢，也可以尝试以下命令：
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" yarn electron:build
OR
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" npm run electron:build
Windows 系统下的加速操作（在上面设置过 electron mirror 的前提下）：
- 到 C:\Users<用户名>\AppData\Local\electron-builder\Cache 下面，建立 nsis 和 winCodeSign 两个目录。
- nsis目录下， 将事先下载好的 nsis-3.0.4.1.7z 和 nsis-resources-3.4.1.7z 分别解压到子目录 nsis-3.0.4.1 和 nsis-resources-3.4.1 目录下 。
- winCodeSign 目录下，将事先下载好的 winCodeSign-2.6.0.7z 解压到子目录 winCodeSign-2.6.0目录下 。
npm run electron:build
【Mac】打包后的文件如下：
electron-build-package.png
【Windows】 打包后的文件如下：
electron_打包.png
示例工程
示例工程可以从 github 上获取，地址是 electron-vue-demo。
网友评论