教你一键开发桌面应用程序

前言

因为公司项目关系,要开发一款桌面应用程序。说到桌面应用程序,有很多种解决方案,最终我们选了Electron,备受前端开发喜爱的VS Code正是Electron开发的,今天我们就来聊聊这个Electron。

什么是Electron

Electron可以让你使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序,基于 Chromium 和 Node.js,兼容 Mac、Windows 和 Linux。

这些在官网上都能看到,可以了解到,这是一个基于前端技术开发桌面应用程序的工具,并且底层基于 Chromium 浏览器。所以使用Electron开发不会遇到什么兼容性问题。在Web应用大行其道的今天,Electron可以使用几乎所有Web前端或Node.js生态的技术和解决方案。

Electron与VUE相结合

Electron-vue

基于VUE来构造 Electron 应用程序的样板代码。使用vue-cli来创建一个Electron-vue项目。在样板代码的基础上进行开发。

vue init simulatedgreg/electron-vue my-project

进入项目看一下目录结构

640.png

.electron-vue文件夹下放着webpack构建文件

src/main为主进程文件夹,index.js为应用程序的主文件,Electron 也从这里启动。参数可见Electron官网文档。

src/renderer为渲染进程文件夹,这里就是我们比较熟悉的前端代码了。可见初始化了vue-router与vuex。

Vue Cli Plugin Electron Builder

轻松使用Electron构建你的桌面VUE.js应用程序。在使用Vue-CLI创建的项目中执行命令,即可将前端项目转换成Electron项目。

vue add electron-builder

看一下项目目录

640-1.png

可以看到这就是一个Vue-CLI创建的项目,执行electron-builder命令后新增了background.js文件,此为Electron的应用程序主文件,其中可以配置Electron各项参数。注意src中的vue-router、vuex等都是我后期加上的。

对比

Electron-vue在github上的star数为13.7K,为一个样板项目,创建项目后需要在其样板上进行修改。Vue CLI Plugin Electron Builder在github上star数为2.9k,可以在原有的项目中集成Electron。最后我们还是选择了Vue CLI Plugin Electron Builder,一个原因是它更加灵活快捷,便于集成,还有就是Electron-vue项目在github上可见从19年底后就鲜有commit,已经极少维护了。

你可能感兴趣的:(教你一键开发桌面应用程序)