搭建electron开发环境

第一步、因为elctron需要使用npm安装，所以首先需要安装Node.js。

第二步、新建一个空文件夹，当作应用的根目录，给文件夹起一个名字，这里为app

第三步、点击上图窗口左上角“文件”，选择“打开Windows PowerShell”

第四步、初始化。输入命令："npm init"，如下图所示

这一步中，输入命令"npm init"后，会让你设置一些选项，比如上图中的name,version,description等，这些设置中需要把"entry point"改为"main.js"，其他的都可以直接按回车跳过，设置完之后，会出现Is this ok?(yes)，输入"yes"，初始化就结束了，这时应用根目录下会出现名为"package.json"的文件，如下图所示：

之后我们还要修改一下package.json的内容，打开package.json，将"scripts"里的内容改为"start": "electron ."，如下图所示：

修改完之后，保存即可。

第五步、安装electron。首先在自己的用户目录（在C盘“用户”目录下找到自己用户名对应的目录即可）下找到文件.npmrc，打开.npmrc，在文件的结尾添加：

registry=https://registry.npm.taobao.org 
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

这样做的作用就是将下载地址改为国内的淘宝镜像，提高下载速度，不做这一步的话，在安装electron的过程中肯定会卡在node install.js上面，导致安装失败。

然后在PowerShell中输入命令"npm install electron --save-dev --verbose"，开始安装，第一次安装会稍微慢一点，以后就很快了，安装后应用根目录如下图所示：

第六步、编写main.js，在根目录下新建文件main.js，输入以下代码：

const electron=require('electron');
const app=electron.app;

const path=require('path');
const url=require('url');

const BrowserWindow=electron.BrowserWindow;

// 初始化并准备创建主窗口
app.on('ready', function () {
    // 创建一个宽800px 高500px的窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 500,
    });
    // 载入应用的inde.html
    mainWindow.loadURL(url.format({
		pathname:path.join(__dirname,'/index.html'),
		protocol:'file:',
		slashes:true
	}));
    // 窗口关闭时触发
    mainWindow.on('closed', function(){
        // 想要取消窗口对象的引用， 如果你的应用支持多窗口，你需要将所有的窗口对象存储到一个数组中，然后在这里删除想对应的元素
        mainWindow = null            
    });    
});

保存后文件夹app如下图所示：

第七步、编写index.html，这个html文件可以根据自己的需要编写，这里写一个简单的hello,world，代码如下：

  
    
  
  
    
Hello World!
  

保存后的文件夹如下所示：

最后一步，在PowerShell里输入"npm start"即可启动应用，如下图所示：

大功告成。