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

前言

因为公司项目关系，要开发一款桌面应用程序。说到桌面应用程序，有很多种解决方案，最终我们选了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，已经极少维护了。