最近一直在学习 Electron 开发桌面应用程序，在尝试了 java swing 和 FXjava 后，感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序，记录学习过程中的坑。

Electron是什么呢？#

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

一、环境准备#

本地环境：Node.js + npm

Copy
# 下面这行的命令会打印出Node.js的版本信息 node -v  # 下面这行的命令会打印出npm的版本信息 npm -vCopy

二、目录结构#

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：

Copy
your-app/ ├── package.json ├── main.js └── index.html

为你的新Electron应用创建一个新的空文件夹，并新建上述三个文件。

三、package.json#

其中package.json的文件内容如下：

Copy
{   "name": "my-app",   "version": "0.1.0",   "description": "",   "main": "main.js",   "scripts": {     "start": "electron ."   },   "author": "",   "license": "ISC" }

Tips：使用npm init命令可以便捷创建package.json。

四、安装Electron#

在终端进入到工程文件夹下进行操作，会在当前目录下安装Electron。

Copy
# 局部安装 需要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装 npm install electron --save-dev # Windows使用下面语句 64位32位机器都是--win32 npm install electron --save-dev --platform=win32  # 验证安装 node_modules/.bin/electron -v

Tips：--save-dev参数会在package.json文件中导入该依赖到devDependencies属性下，--save参数会导入该依赖到dependencies属性下。

安装过程可能会很慢，正常的话，安装下载进度如下直至完成。

Copy
> electron@5.0.6 postinstall /home/qii/electron/eee/node_modules/electron > node install.js  Downloading tmp-26643-1-SHASUMS256.txt-5.0.6 [============================================>] 100.0% of 4.74 kB (