桌面应用之electron开发 - 好文

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
<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

然后，一路按回车键。
图3.1 创建项目

2）代码目录结构

经过步骤1）之后，自动生成了基本的代码结构，如下图3.2所示。熟悉vue.js开发的小伙伴会发现这样的代码结构非常眼熟，其中：
图3.2 代码结构

* src/main/index.js是程序入口文件，electron-vue已经帮我们生成好代码。如果需要修改程序加载、窗口属性等设置，在这里修改。
*
src/renderer/components：存放页面布局文件，你开发页面时在这个文件下创建页面的index.vue、index.js、index.css文件。
* src/renderer/router/index.js：设置页面转跳路由。
* build：存放项目打包生成的安装包。
3）编写页面布局及路由

为了简单说明electron的使用，博主编写一个demo, 界面如下：
图3.3 demo界面

* 首先在components下面分别创建页面的布局文件，如下图所示。图3.4 页面布局文件

* 设置页面转跳路由
在src/renderer/router/index.js中设置页面转跳的路由。
图3.5 路由设置

4）编译并运行项目

执行下面的指令，如果没有报错，会自动弹出程序界面，说明程序运行起来了。
cd electron-demo yarn (或者npm install） yarn run dev（或者npm run dev）
5）项目打包

执行指令：npm run build，经过几分钟的等待之后在项目根目录下面的build文件夹中看到已经生成了安装包文件，如下图所示。
图3.6 项目打包

安装electron-demo-1.0.0.dmg，安装成功之后打开这个demo程序，弹出如图3.3的界面。恭喜你，成功运行起来了。

Demo源码地址：https://github.com/rzhaolin/Desktop-ElectronDemo
<https://github.com/rzhaolin/Desktop-ElectronDemo>。

参考文献

1.Electron官方网页：https://electronjs.org/docs/tutorial/about
<https://electronjs.org/docs/tutorial/about>

2.Electron应用：https://electronjs.org/apps <https://electronjs.org/apps>

3.electron-vue ：https://github.com/SimulatedGREG/electron-vue
<https://github.com/SimulatedGREG/electron-vue>

热门工具换一换