【原創】從零開始搭建Electron+Vue+Webpack項目框架，一套代碼，同時構建客戶端、web端（一）

導航：

（一）Electron跑起來
（二）從零搭建Vue全家桶+webpack項目框架
（三）Electron+Vue+Webpack，聯合調試整個項目）(未完待續)
（四）Electron配置潤色（未完待續）
（五）預加載及自動更新（未完待續）
（六）構建、發佈整個項目（包括client和web）（未完待續）

摘要：隨着前端技術的飛速發展，愈來愈多的技術領域開始被前端工程師踏足。從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文件夾。

　　二、cmd進入文件夾，執行npm init，初始化一個node項目。

　　三、完善工程目錄結構：

　　　　

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

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

　　　　builder：webpack打包腳本，包括打包主進程、渲染進程，打包各個環境的exe安裝包，啓動各個環境的devServer等；

　　　　config：配置文件，包括環境配置、版本等；

　　　　dist：構建出的靜態文件，exe，zip等；

　　　　src：源碼目錄；

　　　　　　main：主進程源碼；

　　　　　　renderer：渲染進程源碼；

　　四、執行npm i electron -D，下載electron，若是7.0.0版本安裝不成功的話，可嘗試cnpm i electron@6.1.2 -D安裝6.1.2版本，我是嘗試了好屢次都沒法下載7.0.0版本，因此這裏使用的是6.1.2。

2、窗口配置，啓動一個最簡單的electron應用

　　一、進入src下的main文件夾，新建index.html和main.js文件；

　　二、index.html文件，除了常規的結構以外，隨便寫點簡單的內容便可，本文只在body標籤內寫入一下代碼：

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

 　　三、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類負責建立窗口。

　　四、啓動應用

　　廢了這麼多話，應用到底該怎麼啓動？那還不簡單，在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\_electron@6.1.2@electron\dist\electron.exe，不該該是個對象嗎？

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

　　

第一篇的內容就寫到這裏了，不多系統的去總結，總感受有些內容寫不出來，暫且作個引子吧，若是但願後續的文章對某部分詳細講解的話，歡迎留言，同時，若是有不恰當的地方，也歡迎批評指正！