electron桌面應用程式搭建及運作

最近一段時間公司暫時沒有項目，突然閑下來坐着無聊，想學點其他技術，開發一個簡單桌面應用，于是選擇了electron技術，現在和大家分享一下。

electron:官方文檔https://www.electronjs.org/解釋了桌面應用的開發好處。

如果你可以建一個網站，你就可以建一個桌面應用程式。 Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生程式的架構，它負責比較難搞的部分，你隻需把精力放在你的應用的核心上即可。

如上面所提到：會 JavaScript, HTML 和 CSS 就可以開發。我們學習 electron 桌面應用有下面這些優勢：

1.減少學習成本。 前端開發者不需要去學習新的開發語言，學習不會花費很多時間；而且，electron學習難度會比其他C#、.net等簡單許多,對于許多開發者是友善的。

2.龐大的社群：electron是github官方産品，不管是架構技術、使用者使用數量，還是使用者信任度，都是得到各界開發人士肯定的。

3.減少工作量： Electron 是跨平台的，可以同時開發 Web 應用和桌面應用，無論是 UI，還是代碼（JS），大多數資源都可以共享，這也為開發者大大減少了工作量，甚至企業也無需重複投入人力來開發系統。

4.未來發展市場廣闊。從electron的主要使用者來看，很多都是大廠，如螞蟻金服、小米、華為、GitHub（Electron 就是 GitHub 推出的）、微軟等，由于現在 GitHub 被微軟收購了，因而目前 Electron 的背景是微軟。是以學習 Electron 不用擔心以後沒市場，畢竟，各大廠都在用 Electron

現在來跟我學習一下electron吧！

一、搭建開發環境

官方給出：

Electron 支援Windows 7 及以上版本—任何在低版本Windows上開發Electron的嘗試都将是徒勞無功的。

electron 是nodejs提供技術插件支援，首先，為避免一些編譯環境不必要的錯誤，安裝nodejs最新版本node下載下傳

再安裝git git下載下傳(下面遠端拉取官方執行個體代碼需要用到)

二、建立項目

1.安裝插件:

cnpm i -g electron

npm i -g electron

yarn electron

選擇任意一種安裝方式

建議使用

cnpm i -g electron

2.建立項目：

方法一:

npx create-electron-app xxx //其中npx為node最新10版本内置指令

方法二:

cnpm i -g yarn //安裝yarn指令

yarn create-electron-app xxx

方法三：

cnpm install -g @electron-forge/cli //安裝electron-forge腳手架

electron-forge init xxx //建立、初始化項目

cd xxx //進入xxx項目目錄

npm start //運作項目

方法四：遠端倉庫拉取

克隆示例項目的倉庫

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

進入這個倉庫

$ cd electron-quick-start

安裝依賴

$ npm install

方法五：手動建立（有興趣的自己去bilibili上搜尋視訊，有很多這類視屏的講解）

三、運作

使用指令行：

npm start

如果是手動建立的使用

electron . //點是目前項目預設運作檔案

截圖如下（這是github遠端倉庫示例）：

如上圖所示我這裡簡單搭建和運作一個桌面應用程式成功！