Electron是什么？怎樣安裝和運(yùn)行Electron軟件

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

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

1. 安裝 Electron Fiddle

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

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

2. 運(yùn)行 Electron 項(xiàng)目

點(diǎn)擊 Electron Fiddle 工具欄中的 【Run】按鈕：

3. 修改 Electron 項(xiàng)目代碼

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

- style.css 是項(xiàng)目布局樣式

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

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

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

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

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

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