介紹
Electron是一個基于Chromium和 Node.js的跨平臺的桌面應(yīng)用開發(fā)框架,可以讓我們用html css js的技術(shù)開發(fā)跨平臺桌面應(yīng)用軟件,也是當(dāng)下最流行的跨平臺桌面應(yīng)用框架。
環(huán)境搭建
在創(chuàng)建Electron跨平臺應(yīng)用之前,我們需要先安裝一些常用的工具,如Node、vue和Electron等。
1.安裝Node.js
進(jìn)入Node官網(wǎng)下載頁http://nodejs.cn/download/,然后下載對應(yīng)的版本即可,下載時建議下載穩(wěn)定版本,然后雙擊安裝程序根據(jù)提示安裝即可。
2.安裝/升級vue-cli腳手架
a.先執(zhí)行:vue -V
,確認(rèn)下本地安裝的vue-cli版本
b.如果沒有安裝或者不是最新版,可以執(zhí)行: npm install @vue/cli -g
安裝/升級
3.安裝Electron
使用如下命令安裝Electron插件
npm install -g electron
或者
cnpm install -g electron
為了驗證是否安裝成功,可以使用如下的命令。
electron --version
4.創(chuàng)建運行項目
Electron官方提高了一個簡單的項目,可以執(zhí)行以下命令將項目克隆到本地。
git clone https://github.com/electron/electron-quick-start
然后在項目中執(zhí)行如下命令即可啟動項目。
cd electron-quick-start
npm install
npm start
啟動后項目的效果如下圖:
除此之外,我們可以使用vue-cli腳手架工具來創(chuàng)建項目
vue init simulatedgreg/electron-vue
然后根據(jù)下面的提示一步步選中選項即可創(chuàng)建項目,如下所示:
然后,使用npm install命令安裝項目所需要的依賴包,安裝完成之后,可以使用npm run dev或npm run build命令運行electron-vue模版應(yīng)用程序,運行效果如下圖所示 :
工程結(jié)構(gòu)
我們主要的開發(fā)的代碼在src下,分為主進(jìn)程、渲染進(jìn)程,main下操作的是主進(jìn)程,renderer下操作的是渲染進(jìn)程。