最近在用Electron + Vue.js 2.0写一个桌面工具。使用下来感觉Electron用起来还是挺爽的。之前为了开发跨平台的桌面应用，我曾经用过Python+wxPython，Swing，SWT等各种技术，但是都有这样那样的问题（例如打包比较麻烦、界面各平台不太一致等）。而Electron基于目前成熟的前端技术，通过内嵌的浏览器内核实现了统一的表现形式，这一点用于做跨平台开发真是太方便了。
1. Electron介绍
Electron技术出现已经有几年了。这里只是简单记录一下：
简而言之，Electron 提供了一个实时构建桌面应用的纯 JavaScript 环境。Electron 可以获取到你定义在 package.json 中 main 文件内容，然后执行它。通过这个文件（通常我们称之为 main.js），可以创建一个应用窗口，这个应用窗口包含一个渲染好的 web 界面，还可以和系统原生的 GUI 交互。
具体来说，就是当你启动了一个 Electron 应用，就有一个主进程（main process ）被创建了。这条进程将负责创建出应用的 GUI（也就是应用的窗口），并处理用户与这个 GUI 之间的交互。
但直接启动 main.js 是无法显示应用窗口的，在 main.js 中通过调用BrowserWindow模块才能将使用应用窗口。然后每个浏览器窗口将执行它们各自的渲染器进程（ renderer process ）。渲染器进程将会处理一个真正的 web 页面（HTML + CSS + JavaScript），将页面渲染到窗口中。鉴于 Electron 使用的是基于 Chrominum 的浏览器内核，你就不太需要考虑兼容的问题。
kmokidd 使用 Electron 构建桌面应用
2. 安装Vue Devtools
今天主要讲一下怎么在Electron中安装Vue devtools，以方便开发。方法参考Electron官方文档，这里只做记录和翻译。
2.1 特别说明
因为Electron是基于Chromium内核的，和Chrome同根同源。因此这里的方法是在Chrome安装Dev Vuetools，然后添加到Electron中的方法。
2.2 安装步骤
- 首先在Chrome中安装
Vue Devtools； - 在Chrome中打开
about:extensions，并且开启开发者模式，这样就可以获取扩展程序的ID，记住这个ID，例如我这边的值是nhdogjmejiglipccpnnnanhbledajbpd，下面需要用到。 - 打开文件管理器或者Finder，导航到Chrome保存扩展程序的文件夹：
- 在Windows上：
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions - 在Linux可能是（看不同的版本）：
~/.config/google-chrome/Default/Extensions/~/.config/google-chrome-beta/Default/Extensions/~/.config/google-chrome-canary/Default/Extensions/~/.config/chromium/Default/Extensions/
- 在Mac上是：
~/Library/Application Support/Google/Chrome/Default/Extensions
- 在Windows上：
- 在上面的文件夹中找到刚才获取的ID对应的那个文件夹，打开，记录下文件夹中存在的文件夹名字，一般是版本号。这样就获取了最终需要使用的文件夹地址。例如我这边这个地址是：
~/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/3.1.2_0。 - 在Electron应用中添加如下代码：
1app.on('ready', createWindow)
2
3function createWindow() {
4 ...
5 // Open the DevTools.
6 if (process.env.NODE_ENV === 'development') {
7 BrowserWindow.addDevToolsExtension("/Users/zhang/Library/Application Support/Google/Chrome/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/3.1.2_0");
8 }
9 ...
10}
2.3 限制
BrowserWindow.addDevToolsExtension需要在ready事件之后调用，我上面的代码就是在app的ready事件中调用的；- Electron版本不能低于1.2.1，因为对Extension tools的支持API是这个版本添加的。