创建文件夹electron-demo，或命名为其它自己喜爱的名字。并在文件夹下创建下列文件，全部留空即可。
. ├── index.html └── main.js执行 npm init 命令，生成 package.json 文件。其中 scripts 部分设置为 “start”: “electron main.js”。
接下来安装所需的依赖包（npm默认源链接缓慢的，请使用淘宝国内镜像）：
npm install --save-dev electron-prebuilt完成后 package.json 文件如下：
{ "name": "electron-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron main.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron-prebuilt": "^1.4.13" } }完成以上步骤之后文件夹目录结构如下：
. ├── index.html ├── main.js └── package.json既然是个桌面程序，第一步自然是程序启动后要打开个窗口吧。在 main.js 中添加下面的代码：
var electron = require('electron'); var app = electron.app; var BrowserWindow = electron.BrowserWindow; app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }); });很明显 electron 为开发者提供了方便好用的 API 可供调用。app 控制整个程序的生命周期，BrowserWindow 可以打开一个浏览器窗口。
Electron 引入了两个新的概念 Main Process 和 Renderer Process 。以目前浅显的理解，Main Process 指的就是浏览器窗口，Renderer Process 指的就是网页。
在 main.js 中添加好上面的代码后保存，在命令行运行 npm start，应该就会打开一个 800*600 像素的空白窗口。从而也证明程序可以正常跑起来了。
既然打开了一个浏览器窗口，第一个想法自然就是，咱们开个网页吧。在 main.js 里面使用一个简单的方法，就可以达到目的啦。
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('https://github.com/Neveryu') })重新执行 npm start 启动程序之后就可以见到效果。
可是我们在建一个桌面程序呢，肯定是要加载自己写的文件吧。loadURL 同样可以为我们做到。把传入的参数改为本地文件路径就可以啦。
首先在 index.html 里面加点简单的内容，好让渲染成功之后能看到点东西。
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main">hello world</div> </body> </html>main.js 里面修改成加载本地文件：
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('file://' + __dirname + '/index.html') })重启程序应该就可以看见页面渲染出 hello world 字符串了。
打开 html 文件成功的话，下一步自然就是引入一下 jquery 和其它的 js 吧。下面在文件夹根目录放入 jquery-2.0.2.js ，再创建一张 app.js。并在 index.html 里面引入：
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>require('./jquery-2.0.2.js')</script> <script>require('./app.js')</script> </html>有了 jquery，下面的步骤自然就是操作一下 dom 了。我们在 app.js 里面简单地搞一下：
$('.main').text('helloworld')重启程序。OK，很棒。
如果我们引入的是 jquery-2.1.4.js 及其以上的版本。 重启程序，可能就看不到 hello world 。
好了，这应该是哪里出错了吧。是不是开始怀念 chrome dev tool 了？
既然我们是打开了一个浏览器窗口，那应该也能打开 dev tool 才是。Bingo！Electron 可以为你做到！
app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadURL('file://' + __dirname + '/index.html') /* 不加任何参数，可以在本窗口内打开dev tool */ /* mainWindow.webContents.openDevTools() */ /* 加上参数，可以在新窗口中打开dev tool */ mainWindow.webContents.openDevTools({detach: true}) })重启程序就可以在 dev tool 中看到报错了。 Uncaught ReferenceError: $ is not defined
查到正确的引入方法应该是：
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> </body> <script>var $ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script> </html>原因：
看一下 jquery 源码：
if ( typeof module === "object" && typeof module.exports === "object" ) { /* 把jQuery挂到`module`对象下 */ } else { /* 把jQuery挂到`window`对象下 */ }在 app.js 里面简单 console.log 一下可以知道，module 和module.exports 都已经定义，所以 jQuery 挂到了 module 对象下，而不是全局的 window.$ 或 window.jQuery 。
之前 loadURL 方法可以帮我们直接在浏览器中打开本地 html 文件。由于有 nodeJS 的加持，我们还能直接读取本地文件的内容。
html 中加一个 fileContent 。
<html> <head> <meta charset="UTF-8"> <title>electron-quick-start</title> </head> <body> <div class="main"></div> <div class="fileContent"></div> </body> <script>var $ = require('./jquery-2.1.4.min.js')</script> <script>require('./app.js')</script> </html>app.js 中使用 nodeJS 的 API，读取 package.json 文件内容：
var fs = require('fs') var pckJson = fs.readFileSync('./package.json', 'utf8') $('.fileContent').text(pckJson)能做到这一点，就代表我们可以在 app 本地写一些数据来使用了。
---------------------------(正文完)------------------------------------ 一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827
写在最后： 约定优于配置-------软件开发的简约原则. -------------------------------- (完)--------------------------------------我的： 个人网站： https://neveryu.github.io/neveryu/ Github： https://github.com/Neveryu 新浪微博： https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…
