桌面应用之electron开发

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tornyLin/article/details/81609258

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

展开阅读全文

没有更多推荐了,返回首页