本文是小白教程，大神請略過。廢話不多說，開始使用electron簡單搭建一個桌面程序。
前提條件： 已安裝nodejs 。
第一步： 充分提起興趣，自己動手寫一個hello world的桌面程序
- 在桌面打開命令行（win10系統可以按住Shift鍵，在桌面空白處右鍵，點擊“在此處打開命令窗口”，win7打開命令行后cd到桌面下）或git。
- 輸入 以下命令行創建electron-test文件夾
mkdir electron-test然后cd到此文件夾下
cd electron-test
然后在此目錄下
npm init
都選擇默認按Enter鍵，完成后，在electron-test文件夾下可以看到package.json文件。
- 繼續使用命令行，安裝electron
npm install electron --save-dev如果安裝不上，可以使用淘寶鏡像來安裝，執行如下兩條命令：
npm install cnpm -g cnpm install electron --save-dev
成功后，可以在package.json文件看到
-
electron程序分為主進程和渲染進程，簡單理解就是在主進程中創建窗口，在渲染進程中寫頁面。在electron-test目錄下創建主進程文件main.js，並將package.json的"main"配置項修改為我們的主進程"main.js"。接下來，在main.js里面寫如下代碼（需要了解ES6）：
const {app, BrowserWindow} = require("electron"); app.on("ready", () => { // 創建窗口 let win = new BrowserWindow({width:800, height:600}); // 窗口加載主頁面, 即electron-test/index.html win.loadURL(`${__dirname}/index.html`); // 打開調試工具 win.webContents.openDevTools(); }); - 在electron-test目錄下創建index.html，代碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> hello world! </body> </html>
- 修改package.json的scripts配置項，如下：
{ "name": "electron-test", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron ." }, "author": "", "license": "ISC", "devDependencies": { "electron": "^1.6.11" } }
在命令行運行如下命令：npm start
- hello world程序就出來了, 如圖所示：
第二步： 將程序打包，把快樂分享給大家
- 還是在electron-test下運行命令行，安裝打包工具electron-packager：
npm install electron-packager --save-dev安裝不上用淘寶鏡像：
cnpm install electron-packager --save-dev - 修改package.json scripts 配置項，如下：
{ "name": "electron-test", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "packager": "electron-packager . app --platform=win32 --arch=x64 --out ./OutApp --overwrite" }, "author": "", "license": "ISC", "devDependencies": { "electron": "^1.6.11" } }
打包命令配置項：
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
配置說明：
* location of project：項目所在路徑
* name of project：打包的項目名字
* platform：確定了你要構建哪個平台的應用（Windows、Mac 還是 Linux）
* architecture：決定了使用 x86 還是 x64 還是兩個架構都用
* electron version：electron 的版本
* optional options：可選選項
在此處，項目名字為app，構建平台為windows，x64表示64位系統，可以選擇ia32，--out 表示輸出路徑 為 OutApp，--overwrite表示覆蓋前面生成的文件。 - 命令行執行：
npm run-script packager
- 完成后，可以看到
將 app-win32-x64打個壓縮包發給朋友，朋友解壓就可以使用你寫的程序啦~~
更多詳細教程以后會寫，程序自動更新，程序連接操作數據庫，以及程序如何跟mysql一起打包，用戶可以一鍵安裝你的程序+mysql。
需要注意的是：
electron不支持windows xp系統，只支持win7及以上。