vue + electron 开发桌面应用

简介

electron 是一个可以使用 web 技术来创建跨平台原生桌面应用的框架。借助 electron ,我们可以使用纯 JavaScript 来调用丰富的原生 APIs。优点:可以开发跨平台应用;成熟的社区;图形化的开发。缺点:应用体积过大;重型项目性能问题。

electron 核心的部分就是两个进程之间的协作------主进程和渲染进程。进程之间通过 ipcMain 和 ipcRenderer 来进行通信。
主进程:在 electron 里面,运行 package.json 里面 main 脚本的进程成为主进程。主进程控制整个应用的生命周期,在主进程中可以创建 Web 形式的 GUI,而且整个 Node API 是内置其中。
渲染进程:每个 electron 的页面都运行着自己的进程。


(以上图片截取自 vue-conf 2018 的分享,有兴趣的小伙伴可以点击查看)

引入 Vue


这里因为我自己习惯的框架是 Vue 所以选择使用 Vue。

electron-vue

Vue 和 electron结合起来并不是一件特别容易的事。为了方便 vue 开发者开发,出现了electron-vue,这个是 SimulatedGREG 参考 vue-cli2.0 的 webpack 模板骨架搭建的 electron 和 vue 结合的开发脚手架。

vue-cli-plugin-electron-builder

如果你想使用 vue-cli3.0 ,那么 vue-cli-plugin-electron-builder 是一个很好的选择,以插件话得方式构建 electron 应用,作者是 nklayman。(PS:简介里说自己16岁...看看人家再看看自己...)

开发

以上两种方式,前者有很多实际开发项目,后者这个月才刚刚推出1.0的正式版(不过作者更新、回复 Issues 的速度还是很快的)。具体项目创建就不详细说明了,官方文档给出的还是比较详细的。
如果使用 electron-vue 那么遇到下图这样的报错不要方,这个不影响使用。只不过作者认为这是 webpack 的问题没有处理而已。


稍微对比一下两种写法的差别,更便于选择适合自己的吧

electron-vue:主进程和渲染进程代码分别对应 main 文件夹和 render 文件夹。

vue-cli-plugin-electron-builder:正常使用 vue-cli3.0 创建项目,引入 vue-cli-plugin-electron-builder 插件。引入后会出现 background.js ,主进程相关代码在这里书写,就跟正常的 vue 项目没用什么区别。 vue-cli-plugin-electron-builder 使用的是 electron.build 工具进行的打包,如果你想要使用 electron-packager 进行打包,那么你只能使用 electron-vue 了。vue-cli-plugin-electron-builder demo 视频

总结

electron 实际上就是一个 拥有 Node 和不同平台 APIs 支持的加强版 Chromium 浏览器。render 进程开发对于大部分前端都没有什么难度,main 进程的开发Umm...看看这一张图都装不下的 APIs 吧。Demo 使用的是 vue-cli-plugin-electron-builder

前端搬砖工一枚~只是简单的分享 electron 桌面应用的项目创建,没什么深度,想要自己学习的小伙伴还是自己去爬坑吧。
一行代码,多端运行~ 感觉还是个梦想~

--END--

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容