摘要：隨著前端技術的飛速發展，越來越多的技術領域開始被前端工程師踏足。從NodeJs問世至今，各種前端工具腳手架、服務端框架層出不窮，“全棧工程師”對於前端開發者來說，再也不只是說說而已。在NodeJs及其衍生技術高速發展的同時，Nw和Electron的問世，更是為前端發展提速不少，依稀記得哪位前輩說過，“能用Js改寫的，終將用Js改寫”，這不，客戶端來了！使用Electron也有一段時間了，各種簡單複雜的問題，也都或多或少的遇見過，下決心整理出一套客戶端模板出來，一是加深一下自己的理解，二是供小夥伴們參考指正。本文選擇Electron6.x+Webpack4+vue全家桶為技術棧，一套程式碼可以分別打包在客戶端和web端，結合webpack，支援熱更新，打包為exe安裝包，過程中會涉及vue全家桶、electron的常見問題、配置和優化，webpack的對應配置等。從零開始，把electron、vue、webpack統統納入自己的知識體系！專案完整程式碼：https://github.com/luohao8023/electron-vue-template

說明：本著模擬從零開始的過程，最開始的架構或者程式碼設計可能不是最優解，有可能只適用於當前情況，後續會一步步完善，也可能會部分重構，關鍵是體會這個從零到一，再到完善的過程。

下面開始~~~

一、新建工程

　　1、說好的從零開始，就從新建資料夾開始吧，新建electron-vue-template資料夾。

　　2、cmd進入資料夾，執行npm init，初始化一個node專案。

　　3、完善工程目錄結構：

　　專案根目錄的結構大致就是上面這個樣子，後續完善過程中，會在對應目錄下增加相應的子目錄，後面會有講到。下面介紹一下各個目錄的作用：

　　　　app：webpack編譯後的整個專案的程式碼，包括主程序和渲染程序，使用electron-builder打包exe安裝包時，會把這部分程式碼打進去；

　　　　builder：webpack打包指令碼，包括打包主程序、渲染程序，打包各個環境的exe安裝包，啟動各個環境的devServer等；

　　　　config：配置檔案，包括環境配置、版本等；

　　　　dist：構建出的靜態檔案，exe，zip等；

　　　　src：原始碼目錄；

　　　　　　main：主程序原始碼；

　　　　　　renderer：渲染程序原始碼；

　　4、執行npm i electron -D，下載electron，如果7.0.0版本安裝不成功的話，可嘗試cnpm i [email protected] -D安裝6.1.2版本，我是嘗試了好多次都無法下載7.0.0版本，所以這裡使用的是6.1.2。

二、視窗配置，啟動一個最簡單的electron應用

　　1、進入src下的main資料夾，新建index.html和main.js檔案；

　　2、index.html檔案，除了常規的結構之外，隨便寫點簡單的內容即可，本文只在body標籤內寫入一下程式碼：

<h1>Welcome to electron-vue-template!</h1>

 　　3、Electron文件中說，您應當在 main.js 中建立視窗，並處理程式中可能遇到的所有系統事件。不過，隨著我們的應用逐漸複雜，可能不止存在一個視窗，在main.js寫入過多邏輯或者配置的話，會使我們的專案越來越難維護，所以正確的做法是，對應的視窗有自己專門的Js檔案，負責這個視窗的配置和事件監聽，而main.js檔案只需要負責視窗的排程和系統級別的事件監聽。當然，我們今天的目的是啟動一個最簡單的electron應用，所以直接寫在了main.js檔案裡：

const url = require('url');
const path = require('path');
const { app, BrowserWindow } = require('electron');
function createWindow() {
    let win = new BrowserWindow({
        width: 800,
        height: 600
    });
    // 獲取index.html的file協議路徑
    const indexPath = url.pathToFileURL(path.join(__dirname, 'index.html')).href;
    // 如果路徑或者引數中含有中文，需要對路徑進行編碼處理
    win.loadURL(encodeURI(indexPath));
    // 開啟開發者工具
    win.webContents.openDevTools();
    // 監聽視窗的關閉事件，釋放視窗物件
    win.on('closed', () => {
        win = null;
    });
}

// 建立視窗
app.on('ready', createWindow);
// 當全部視窗關閉時退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
    // 否則絕大部分應用及其選單欄會保持啟用。
    if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
    // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
    // 通常在應用程式中重新建立一個視窗。
    if (!win) createWindow();
});

 　　Electron apps 使用JavaScript開發，其工作原理和方法與Node.js 開發相同。Electron模組包含了Electron提供的所有API和功能，引入方法和普通Node.js模組一樣：Electron模組所提供的功能都是通過名稱空間暴露出來的。 比如說：Electron.app負責管理Electron 應用程式的生命週期，Electron.BrowserWindow類負責建立視窗。

　　4、啟動應用

　　廢了這麼多話，應用到底該怎麼啟動？那還不簡單，在package.json的script標籤裡新增一個start命令，命令內容為node ./src/main/main.js，然後執行npm start，程式不就執行了嘛！於是馬上添加了start命令，啟動的時候命令列就報錯了。WTF？？什麼鬼！看了報錯資訊，定位到了是在app.on('ready')這一行，這也能報錯？？

　　試著列印了一下app，undefined！！於是又加了兩行程式碼：　　

const electron = require('electron');
console.log(electron)

　　列印了一下electron，竟然是個這玩意兒：E:\lh\demo\electron-vue-template\node_modules\[email protected]@electron\dist\electron.exe，不應該是個物件嗎？

　　又翻了翻文件，恍然大悟，Electron並不屬於node應用，通過node來執行入口檔案當然是不行的，要用electron來執行，正確的命令為：electron ./src/main/main.js，再次執行npm start，看著命令列輸出的內容以及剛剛啟動的視窗，舒服的長出了一口氣。

第一篇的內容就寫到這裡了，很少系統的去總結，總感覺有些內容寫不出來，暫且做個引子吧，如果希望後續的文章對某部分詳細講解的話，歡迎留言，同時，如果有不恰當的地方，也歡迎批評指正！