Electron是什么？怎樣安裝和運行Electron軟件

Electron(原名為Atom Shell)是GitHub開發(fā)的一個開源框架。它通過使用Node.js和Chromium的渲染引擎完成**跨平臺的桌面GUI應(yīng)用程序的開發(fā)。Electron 現(xiàn)已被多個開源Web應(yīng)用程序用于前端與后端的開發(fā)，著名項目包括 GitHub 的 Atom 、微軟的 Visual Studio Code 和騰訊的QQNT。

Electron并不是一門新的技術(shù)，自 2013 年開始至今已有 10 年歷史了，最初是由 GitHub 團(tuán)隊開發(fā)，現(xiàn)由 OpenJS 基金會負(fù)責(zé)維護(hù)。

1. 安裝 Electron Fiddle

Electron Fiddle [下載地址](https://www.electronjs.org/zh/fiddle)，下載符合各自操作系統(tǒng)的版本，正常安裝即可。

打開 Electron Fiddle 后可以看到自動創(chuàng)建了 Electron 項目的模板，左側(cè)是文件列表，右側(cè)是文件的內(nèi)容，可以簡單的看到Electron 的項目代碼是由 HTML、CSS、JavaScript 構(gòu)成。

2. 運行 Electron 項目

點擊 Electron Fiddle 工具欄中的 【Run】按鈕：

3. 修改 Electron 項目代碼

- index.html 是項目的布局結(jié)構(gòu)

- style.css 是項目布局樣式

- renderer.js 是運行在瀏覽器環(huán)境

- preload.js 是運行在瀏覽器環(huán)境

- main.js 是運行在 Node 環(huán)境

關(guān)于 proload.js 和 main.js 的作用在后面會詳細(xì)介紹，當(dāng)前需要體會到 index.html、style.css 和renderer.js 的作用。

注：默認(rèn)情況下每次打開 Electron Fiddle 都會重新的生成項目模板，代碼模板可以以鏈接形式進(jìn)行分享。

上面的內(nèi)容的主旨內(nèi)容是要知道 Electron 項目的代碼使用的是 HTML、CSS、JavasScript 和 Node.js 相關(guān)的技術(shù)。