1 前言
随着前端的不断强盛，现在的前端已经不再满足于网页开发了，而是在尝试能否使用前端的开发逻辑来开发PC端的桌面软件。也就是用html、js、css这三者来开发桌面软件。
本栏目所介绍的Electron框架就是这众多实践中目前成效最好的一个，就连家喻户晓的QQ，目前也已经采用了这套框架重写。
其优点就在于：你只需要写一份代码，就能直接在linux、windows、mac这三个主流的操作系统上运行。
这可以极大减少程序员的工作量。
但缺点也是有的，那就是它底层采用的Chrome内核，简单直白的来说就是，你用Electron开发出来的一个软件，就相当于一个浏览器。
因此它的内存占用量、启动速度等等，相比于原生平台开发的软件都会差很多。
但总的来说，依旧是瑕不掩瑜，毕竟如今个人电脑运行速度越来越快，内存越来越大，只要优化的好，这些缺点都不会是问题。
比如著名的vscode就非常的强大！而它就是依靠Electron框架开发、不断优化而来的。
2 下载安装
其官网教程可以点击这里跳转。
简单来说就是，你要想使用这套框架，你就得先安装Node.js，安装方法其实也很简单，前往官网下载安装即可：Node.js
一般下载长期支持版本：
从上图中的英文说明中也能看出它的作用，它是一个开源、跨平台、JavaScript的运行时环境。
更简单直白的来说，它就相当于一个没有窗口的浏览器，只不过比浏览器更强大，它可以让你使用js代码操作本地数据。而在浏览器中，js代码只能用来控制html标签、或者收发网络请求等等操作。
下载安装完成之后，来到控制台，输入node -v，如果能打印出版本号，就说明你已经安装成功了。
打印不出来，可以尝试重启一下电脑。
有了这个，下面我们就可以安装Electron框架了，按照官方文档的指示，你需要先创建一个文件夹，然后用npm初始化这个文件夹：
mkdir my-electron-app && cd my-electron-app
npm init
mkdir与cd都是cmd命令，前者用于创建文件夹，后者用于进入这个文件夹，中间的&&用于两个命令分隔，为且的意思。
也就是只有前者执行成功后，后面这个命令才会执行。因此上面的my-electron-app只是一个文件夹的名称，可以自己随便取。
然后用npm init来初始化这个文件夹。
npm是你安装node时自带的一个包管理器，以后你下载其它第三方包，都可以用它来下载，这里的初始化，其实也就是在初始化一个包管理文件。
运行了它之后，会出现一系列让你选择的东西，可以直接一直按Enter即可，全部默认，然后这个文件中就会出现一个叫做package.json的文件。
这个文件就是npm的包管理文件，
刚才在命令行让你填的内容，最终也会保存到这个文件中的，所以你可以直接修改这个文件即可。
上面的字段中：
name：这个项目的名字（一般我们称开发一个软件的工程为项目），默认取的当前文件夹的名称（我取的就是test-ele）version：版本号description：描述信息，也就是这个软件是干嘛的，自己随便填main：这个就比较重要了，这是这个项目的入口文件，也就是代码将从哪个文件开始执行？其默认是index.js。scripts：这个也比较重要，脚本执行的，比如上图中test对应的后面一长串的东西，那么以后我就能直接运行npm run test来代替运行后面那一长串的东西，可以让你后面执行的时候少敲一些键盘，而且也更容易记住。author：作者信息license：许可证，这个新手一般用不到，默认即可，除非你想要开源你的代码，那可以再自己研究研究。
上面的步骤仅仅只是完成了一个最基本的、基于node的项目初始化步骤。
完成了基本的项目初始化之后，下面我们就可以开始安装electron了。
按照官方的说法，你可以继续在命令行当前项目目录下，运行npm install --save-dev electron命令来安装Electron框架。
如果能安装成功自然最好，但很多人可能都会安装失败，因为我也安装失败了，所以可以替换为下面的方式。
运行下面这个命令，全局安装另一个包管理器cnpm，并设置镜像网站(https://registry.npmmirror.com)：
npm install -g cnpm --registry=https://registry.npmmirror.com
然后，用这个新安装的cnpm包管理器来下载安装Electron即可，速度非常快！
cnpm install --save-dev electron
安装完成后，当前目录下就又会多出一个文件夹：
node_modules文件夹存放的就是我们下载后的包，所有下载的包都会被放在这个文件夹中。
并且此时我们的包管理文件会多出一个devDependenceies的项，该项的作用就是记录我们当前这个项目用到了那些包。
比如这里由于前面我们在命令行中为本项目安装了electron，所以这里就将electron写入其中了，并且后面还有对应使用的版本号。
除此之外，我还将原本的脚本命令test改为了start，并让其值为electron .，这个命令就是electron框架的运行命令，后面我们将直接使用npm run start代替，可以方便使用。
至此，我们的Electron就安装完成了！
3 第一个Electron程序
前面我们完成了Electron的环境搭建，下面就开始详解如何使用Electron开发一个完整的Electron桌面端程序。
注意开发环境，个人推荐使用vscode编辑器，网上可以找到很多教程，我这里不再赘述。
同时使用Electron开发是需要你有基本的前端开发经验的，比如html、js、css等，这些比较基础的东西我在文章中不会讲解太多，不会的可以先参考本站的另外三篇文章：
3.1 运行结构
前面提到，我们在package.js文件中看到了一个叫做main的项，它的值默认为index.js，意思就是将这个文件作为我们软件运行的入口文件。
所以现在我们主要需要自己创建两个文件：
index.js：软件运行的入口文件。index.html：这就是我们软件的主页面，用html代码完成。
首先是index.html文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
</body>
</html>
