我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情
学习新的知识首先需要配置好开发环境，开发环境没配置好会影响后面的学习和开发，所以学习Electron首先要配置好基础的开发环境，希望对大家有所帮助。
1、下载Node.js
我们可以去官网nodejs.org下载最新版本的安装程序 我下载的不是最新版本，不过建议大家下载最新版本、如下：
2、安装 Node.js
之后点击安装软件进行安装nodejs，安装安装步骤一步步执行，安装后找到安装位置，进行配置环境变量，这样方便于自己在命令窗口或者开发工具执行相关命令。
3、配置环境变量：
如图所示，进行配置环境变量；
配置好环境变量之后 打开命令窗口，输入：
node -v
检验下是否安装成功，如果成功就会如下图所示：
以上node.js 的环境就搭建完成，我们可以开发简单的node.js 了；
4、安装Electron：
我们打开命令窗口、在命令窗口 输入：
npm install -g electron
等待执行成功 在命令窗口输入
electron -v
如下图所示：
以上命令执行完成之后， electron环境就搭建完毕了；接下来我们简单生成一个可视化界面；
5、创建简单的Demo
通过命令进入到项目的文件夹，这样我们项目就创建在这个文件夹中了；
我们在命令界面输入
npm init
当执行npm init时，会按照步骤，如果你不想输入，每次直接回车即可，后面也是可以修改的
这个命令执行完成之后 会在文件夹中生产 package.json文件，如图：
之后执行 ：
npm install --save-dev electron
会在文件夹中生产node_modules 数据，node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具
在package.json 中 main 主入口 如图，需要index.js 所以我们进行创建 index.js文件，这个就是我们的程序入口了；
我们新建index.js 文件 ，在index.js中的代码如下：创建窗口
const {app ,BrowserWindow} = require('electron')
function createWindow() {
let win = new BrowserWindow(
{
width : 800,
high :800,
webPreferences:{
nodeintegration:true
}
}
)
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
当然我们还需要创建index.html ，这个文件主要是展示我们创建的得界面，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
你好 node.js
</body>
</html>
整个demo结构文件如图：
之后我们修改package.json中的scripts 添加"start":"electron"这个是启动窗口的命令；
我们在命令界面中输入 如下所示：
npm -start
执行完npm -start 会出现下图的界面，这个简单的demo就出来了
我们首先配置node.js 的开发环境，接下来配置 electron的开发环境，剩下的就是我们愉快的写代码了；
