Electron入门教程
electron目前它已成为开源开发者、初创企业和老牌公司常用的开发工具，今天我就来带大家进入electron的大门
Electron如何安装?
1、方式一：通过npm进行安装通过那npm进行安装比较简单，但是要注意的是，npm是安装node时附带的包管理器，所以你需要先安装node,如果你没有安装的话，可参考我下面的另一篇文章
2、安装完node，就可以执行命令来安装electron了，如下：npm install electron -g提醒：如果通过npm来安装在国内可能比较慢，推荐安装cnpm，使用淘宝镜像来安装我们的electron.安装cnpm的命令如下：npm install -g cnpm –registry=https://registry.npm.taobao.org安装完成后可以输入cnpm -v 来查看是否安装成功，显示了版本号就代表成功了。用cnpm来安装electron和用npm来安装electron几乎没什么区别，就是把npm改为cnpm即可命令：cnpm install -g cnpm –registry=https://registry.npm.taobao.org当然，安装cnpm不是必须的，你也可以不安装cnpm，直接用npm来安装electon也行
3、然后我们开始创建main.js文件 ，用于创建窗口，把网页ui放到窗口里面来去，同时处理系统时间，代码如下：const e造婷用痃lectron = require('electron');const app = electron.app; // 控制应用生命周期的模块。const BrowserWindow = electron.BrowserWindow;// 创建原生浏览器窗口的模块// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，// window 会被自动地关闭var mainWindow = null;// 当所有窗口被关闭了，退出。app.on('window-all-closed', function() { // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前 // 应用会保持活动状态 if (process.platform != 'darwin') { app.quit(); }});// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候// 这个方法就被调用app.on('ready', function() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭，这个事件会被发出 mainWindow.on('closed', function() { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 但这次不是。 mainWindow = null; });});
5、ok,所需的必须文件全部创建
7、方式一：打开cmd窗口，输入electron，会弹出electron的窗体来，如下图所示，然后你复制下框中的electron.exe的路径，然后后面加一个空格在输入你的electron-app目录路径即可运行，在我的电脑上的命令如下，每个人的电脑上肯定都不一样：F:\installPackages\node-v9.9.0-win-x64\node_modules\electron\dist\electron.exe D:\webs\electron-app然后就运行起来了。注意：如果你是直接下载electron压缩文件来使用的话，可能弹出的框不太一样，你可以直接拖动main.js进入到electron的弹框里面就能运行。
如何将electron应用进行打包
1、 安装electron-packager进行打包cnpm installelectron-packager -g2. 在当前项目目录下执行打包命令electron-packager . appName --platform=win32 --arch=x64 --download.mirror=https://npm.taobao.org/mirrors/electron/ --electron-version=2.0.0 --asar --app-version=0.1.0 --build-version=0.1.0 --out=outName --overwrite --no-package-manager --ignore="(.git|node_modules)"3.执行此命令后会在当前项目目录下生成outName文件夹，打包而来的桌面应用就在这个文件夹里面。此时我们执行appName.exe就能运行这个桌面应用了如图所示：
3、 安装grunt-electron-installer执行命令：cnpminstallgrunt-electron-installer--save-dev
5、新建Gruntfile.js文件代码如下：var grunt = require("grunt"); grunt.config.init({ pkg: grunt.file.readJSON('package.json'), 'create-windows-installer': { x64: { appDirectory: './appName-win32-x64', authors: 'zhanglu.', exe: 'appName.exe', description:"electron-app", } } }) grunt.loadNpmTasks('grunt-electron-installer'); grunt.registerTask('default', ['create-windows-installer']);
6、执行grunt进行打包为安装包 准备工作都完成之后，在outName目录下执行grunt就可以了（执行中，最好退出360，电脑管家，毒霸等软件，可能会造成干扰）打包完成后会在outName目录下生成installer文件夹，如下图：Setup.exe就是打包来的安装程序
7、ok,electron的入门教程，到此结束。