美文网首页Vue前端之路H5
vue + electron 开发桌面应用

vue + electron 开发桌面应用

作者: Howie126313 | 来源:发表于2019-02-27 15:06 被阅读295次

    简介

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

    相关文章

      网友评论

        本文标题:vue + electron 开发桌面应用

        本文链接:https://www.haomeiwen.com/subject/mgzxuqtx.html