桌面应用之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。为了提高开发效率，博客推荐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。

参考文献

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

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

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