---

【Electron官網】https://www.electronjs.org/zh/docs/latest/api/app

【1】npm init @quick-start/electron（推薦）

在命令行中執行以下命令：

npm init @quick-start/electron

該命令將安裝并執行腳手架工具 create-electron 。你將看到一些可選功能的提示，例如框架 (vue, react, …) 和 TypeScript 支持：
創建項目后，按照說明安裝依賴項并啟動Electron程序：

【2】 克隆倉庫，快速啟動

#1. 克隆項目；
git clone https://github.com/electron/electron-quick-start#2. 進入這個項目下；
cd electron-quick-start#3. 安裝依賴；
npm install#4. 運行項目；
npm start

打開快速啟動的項目，主要有以下幾個文件：
(1). index.html ，渲染進程；
(2). render.js，渲染進程，在index.html中引用；
(3). main.js，主進程；
(4). preload.js，監聽DOM加載完成，在主進程中調用。

【3】 通過腳手架搭建項目

electron-forge是一個用來搭建electron項目的腳手架，不僅可以用來運行項目，還可以用來打包項目。
官網：Getting Started - Electron Forge

#如果電腦上安裝了安裝了最新版本的 node 可以使用 npx 創建項目，如果安裝了 yarn 也可以使用 yarn 創建項目；
npx create-electron-app my-new-app或者yarn create electron-app my-new-app#運行項目；
cd my-new-app  // 進入項目
npm start  // 啟動項目

如果無法使用npx或是yarn安裝項目，可以用傳統的方法來完成。

// 安裝腳手架
npm install -g @electron-forge/cli// 初始化項目
electron-forge init my-new-app// 進入項目
cd my-new-app// 啟動項目
npm start

【4】 手動創建項目

1. 新建項目文件夾；
2. 新建渲染進程 index.html 文件與主進程 main.js 文件；
3. 初始化項目，創建package.json；

npm init 
#請注意，package.json中的主文件必須名為main.js。 

4. 在項目中安裝Electron；雖然在全局有安裝Electron，但是在寫代碼的時候并沒有提示，所以需要進入項目中安裝一下，這樣就會有提示了。

cnpm i electron --save-dev

5. 編寫主進程main.js代碼；

const { app, BrowserWindow } = require("electron");
const path = require("path");const createWindow = ()=>{// 創建窗口const mainWindow = new BrowserWindow({width: 800,height: 600});// 加載本地文件mainWindow.loadFile(path.join(__dirname,"index.html"));// 加載遠程地址// mainWindow.loadURL('https://github.com');
}// 監聽應用的啟動事件
app.on("ready",createWindow);// 兼容MacOS系統的窗口關閉功能
app.on("window-all-closed",()=>{// 非MacOS直接退出if(process.platform!="darwin"){app.quit();}
});// 點擊MacOS底部菜單時重新啟動窗口
app.on("activate",()=>{if(BrowserWindow.getAllWindows.length==0){createWindow();}
})

6. 引入eslint 檢查代碼；

(1). 安裝eslint；cnpm install -g eslint
(2). 在項目中初始化eslint；eslint --init
初始化時會有各種選項，選項可以參考下面的結果。 

7. 運行項目；

electron .