使用 electron-vue

背景

代码基于 electron-vue，官网链接 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 可以先看看，了解背景知识，而electron-vue 又是基于 electron 的，所以建议也看看 electron 的官方文档，https://electronjs.org/ 。

安装node.js和yarn

如果是前端工程师的话，应该已经安装好了node.js。如果没有请到官网下载安装。

对这个工程而言，推荐使用yarn来管理依赖。

npm install --global yarn

本地模块依赖

有些模块是本地模块，需要在开发机器上编译，所以还要安装本地模块的编译环境：

参考：

https://zhuanlan.zhihu.com/p/28236670

npm install -g node-gyp
npm install --global --production windows-build-tools

注意第二个需要admin权限，cmd命令需要run as admin。同时第二个的安装时间会比较久。

安装项目依赖

环境安装完成后，在项目根目录下执行：

yarn

就会开始安装所需的依赖。

image.png

有些依赖项可能需要翻墙才能下载，所以会遇到最后进度卡住的情况：

image.png

这时候通过执行

npm install

先强行绕过去，就会来到这个界面：

image.png

这也是翻墙问题导致的，因为对后续操作没有影响，所以我们到这一步就可以了。

运行开发环境

通过运行如下的命令使用开发环境：

yarn run dev

image.png

开发环境下的操作是模拟的，所以可以集中于界面自身的逻辑，包括样式，网络请求和数据库操作。

打包用于联调和发布

如果要和exe联调，或者发布，那么就需要先打包，运行如下命令：

yarn run build:dir

同样会遇到需要翻墙的问题。

image.png

可以先下载好 winCodeSign-2.3.1.7z，放到以下路径并解压：

%LOCALAPPDATA%\electron-builder\cache

image.png

正常的输出:

image.png

在如图所示的路径下会有下面两个文件，就是打包好的程序资源：

image.png

将这两个程序资源文件覆盖原来安装目录下的同名文件，就完成了一次更新。

日志和调试

main模块的代码，运行的时候的日志，是会输出在主程序目录的日志中，以 [electron] 开头。

render模块的代码，运行的时候的日志，包括代码调试，可以通过打开控制台来进行调试。设置方式参考：

ijser.cn/2017-04-23-build-electron-app-tricks/

我们可以使用Electron提供的Accelerator，设置一个较复杂，用户不容易按的组合快捷键：

import { app globalShortcut } from ‘electron’

app.on(‘ready’, () => {
globalShortcut.register(‘CmdOrCtrl+Alt+Shift+F11’, () => {
        mainWindow.webContents.openDevTools()
    })
})