一、 安裝 electron

電腦安裝了nodejs后就可以使用npm了，首先安裝electron。

npm install -g electron

二、 克隆一個(gè)倉(cāng)庫(kù)

使用官方git命令，如果你的電腦有g(shù)it的話，沒(méi)有的話使用下面的方法。

克隆官方倉(cāng)庫(kù)

git clone https://github.com/electron/electron-quick-start

克隆完成后，使用命令行進(jìn)入目錄

cd electron-quick-start

接下來(lái)安裝依賴，需要等待一會(huì)

npm install

安裝慢可以使用cnpm

運(yùn)行項(xiàng)目

npm start

運(yùn)行效果可以看到hello world，這個(gè)就是一個(gè)調(diào)試的界面了。

三、 手動(dòng)創(chuàng)建electron項(xiàng)目

1、新建一個(gè)項(xiàng)目目錄 例如：electrondemo01
2、在 electrondemo01 目錄下面新建三個(gè)文件: index.html、main.js 、package.json
3、index.html 里面用 css 進(jìn)行布局（以前怎么寫現(xiàn)在還是怎么寫）
4、在 main.js 中寫如下代碼：

var electron =require('electron');
//electron 對(duì)象的引用
const app=electron.app;
//BrowserWindow 類的引用
const BrowserWindow=electron.BrowserWindow;
let mainWindow=null;
//監(jiān)聽(tīng)?wèi)?yīng)用準(zhǔn)備完成的事件
app.on('ready',function(){
//創(chuàng)建窗口
mainWindow=new BrowserWindow({width: 800, height: 600});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
})
})
//監(jiān)聽(tīng)所有窗口關(guān)閉的事件
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
})

5.運(yùn)行

在本目錄使用cmd命令：

electron .

四、 使用electron-forge 搭建一個(gè) electron 項(xiàng)目

electron-forge 相當(dāng)于 electron 的一個(gè)腳手架，可以讓我們更方便的創(chuàng)建、運(yùn)行、打包electron 項(xiàng)目。

1.安裝，只需要安裝一次，以后不用了

npm install -g electron-forge

2.初始化項(xiàng)目，其中my-new-app為項(xiàng)目名，可以自己起，稍等一會(huì)。

electron-forge init my-new-app

如果失敗，還是可以使用cnpm，先刪除my-new-app目錄的node_module目錄，如果沒(méi)有的話就不管，然后運(yùn)行代碼：cnpm install

3.運(yùn)行項(xiàng)目

切換到這個(gè)目錄，運(yùn)行

npm start