前言

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

Electron简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

本地起一个Electron+vue项目

# 如果你没有vue-cli的话需要全局安装

npm install -g vue-cli

# 然后使用vue-cli来安装electron-vue的模板

vue init simulatedgreg/electron-vue my-project

# 安装依赖

cd my-project yarn # or npm install

# 进入开发模式

yarn run dev # or npm run dev

这样我们项目就创建成功了，接下来跟我们使用vue开发网页一样只是给网页套了一个桌面App的外壳，让我们看看项目的目录结构。

Electron+vue项目的目录结构

• electron-vue：Electron模版配置。
• build：文件夹，用来存放项目构建脚本。
• config：中存放项目的一些基本配置信息，最常用的就是端口转发。
• node_modules：这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件。
• src： 这个目录下存放项目的源码，即开发者写的代码放在这里。
• static： 用来存放静态资源。
• package.json：中定义了项目的所有依赖，包括开发时依赖和发布时依赖。

Electron应用程序

Electron应用程序分成三个基础模块：主进程、进程间通信和渲染进程。

主进程主要在mian目录里开发，大家需要开发桌面系统功能的可以从文档中寻找对应的API

渲染进程就相当于一个vue项目去开发

主进程和渲染进程之间的通信可以通过Electron中的ipcMain和ipcRenderer来实现

ipcMain： 当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。

ipcRenderer： 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。 也可以接收主进程回复的消息。

Electron应用程序打包

Electron应用程序打包方式有两种electron-packager及electron-builder将已有的electron应用打包成msi格式和exe可执行文件

这里我们使用electron-packager来打包，首先安装electron-packager依赖

yarn add electron-packager --save-dev

在package.json中的scripts中, 添加如下内容:

"packager": "electron-packager ./ testapp --win --out ./outputs"

执行打包命令

npm run packager

打包成功后我们就可以在OutApp目录下找到可执行的exe文件了