Electron 新手上路


Electron 是我最近很有興趣的一個框架,簡單的說它就是可以用 javascript 來做桌面應用程式,雖然說打包出來的程式很肥(100mb起跳…),但使用 HTML+JS+CSS 來開發桌面應用程式對前端工程師來說是最熟悉也最簡單的方法。
雖然是用網頁做出來的應用程式,但功能並不陽春,最有名的應用就是 Mircrosoft VScode,除了啟動慢了點,我覺得這應該是目前開發前端最好用的工具了,由此可見使用 Electron 開發桌面應用絕對是一個不錯的選擇。

Electron 是基於 Node.js 的框架,所以在開始前請先安裝 Node.js。
Node.js 下載位置

兩個都可以,左邊的是穩定版,右邊是目前最新版。

接下來到electron-quick-start,我通常都是下載 zip 檔。

新開一個資料夾,將 zip 檔解壓縮。

使用命令提示字元(cmd.exe,以下簡稱cmd)跳到該資料夾的目錄下。

在cmd執行

npm install

它會自動下載需要的套件(很肥,抓完有100mb左右)

下載完在cmd執行

npm start

就可以看到一個視窗跳出來,已經完成一個簡單的桌面應用程式了。