1. Electron简介
引自Electron官方的说明[1]：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。目前，Electron已被Microsoft、Facebook、Slack和 Docker等大厂接受，应用涉及开发工具、社交应用、音乐、游戏、金融等领域[2]。
2. 脚手架——electron-vue
Electron文档已比较完善，官方文档请参考：https://electronjs.org/docs。为了提高开发效率，博客推荐electron-vue脚手架来开发electron应用。
electron-vue 是一个结合electron和Vue.js的项目[3]，非常方便建立起electron应用程序模版。Vue.js是当前比较火的JavaScript MVVM库, 它以数据驱动和组件化的思想构建前端应用，被越来越多的前端开发者接受。采用electron-vue脚手架之后，你可以使用 webpack、electron-packager 或 electron-builder，vue-router、vuex 等最常用的插件。
electron-vue脚手架安装：npm install -g vue-cli。
3. 使用教程
1）创建项目
vue init simulatedgreg/electron-vue XXX
然后， 一路按回车键。
2）代码目录结构
经过步骤1）之后，自动生成了基本的代码结构，如下图3.2所示。熟悉vue.js开发的小伙伴会发现这样的代码结构非常眼熟，其中：
- src/main/index.js是程序入口文件，electron-vue已经帮我们生成好代码。如果需要修改程序加载、窗口属性等设置，在这里修改。
- src/renderer/components：存放页面布局文件，你开发页面时在这个文件下创建页面的index.vue、index.js、index.css文件。
- src/renderer/router/index.js：设置页面转跳路由。
- build：存放项目打包生成的安装包。
3）编写页面布局及路由
为了简单说明electron的使用，博主编写一个demo, 界面如下：
- 首先在components下面分别创建页面的布局文件，如下图所示。
- 设置页面转跳路由
在src/renderer/router/index.js中设置页面转跳的路由。
4）编译并运行项目
执行下面的指令，如果没有报错，会自动弹出程序界面，说明程序运行起来了。
cd electron-demo
yarn (或者npm install）
yarn run dev（或者npm run dev）5）项目打包
执行指令：npm run build，经过几分钟的等待之后在项目根目录下面的build文件夹中看到已经生成了安装包文件，如下图所示。
安装electron-demo-1.0.0.dmg，安装成功之后打开这个demo程序，弹出如图3.3的界面。恭喜你，成功运行起来了。
Demo源码地址：https://github.com/rzhaolin/Desktop-ElectronDemo。
参考文献
1.Electron官方网页：https://electronjs.org/docs/tutorial/about
2.Electron应用：https://electronjs.org/apps
3.electron-vue ：https://github.com/SimulatedGREG/electron-vue