作為快速桌面應(yīng)用開發(fā)的首選,小巧茬故、靈活是?Electron?的核心理念戳鹅。 實(shí)現(xiàn)一個(gè) Hello World 應(yīng)用僅需編寫很少量的代碼今妄。
開始前請確保安裝了?Node.js?和相應(yīng)的軟件包管理軟件菲盾。?yarn?和?npm?都是?Node.js?生態(tài)圈優(yōu)秀的軟件包/依賴管理程序颓影。
第一步:項(xiàng)目設(shè)置
運(yùn)行?yarn init?或?npm init?創(chuàng)建項(xiàng)目。
在?package.json?中進(jìn)行基本的設(shè)置:
第二步:安裝 electron
yarn add -D electron?或?npm install --save-dev electron
第三步:加入關(guān)鍵代碼片段
創(chuàng)建文件?index.js亿汞。 這個(gè)文件是程序入口瞭空,我們指定: 在程序啟動(dòng)時(shí),創(chuàng)建一個(gè)寬度 800px疗我,高度 600px 的窗口咆畏,并在窗口中加載?index.html。
接著創(chuàng)建?index.html吴裤。 這是一個(gè)最簡單的 hello world 頁面旧找,展示了一行文本標(biāo)題。
最后一步:??成功運(yùn)行麦牺!??
為了看到以上代碼的效果钮蛛,我們要讓程序運(yùn)行起來。
進(jìn)入程序目錄剖膳,在命令行中執(zhí)行?yarn start?或?npm start魏颓。
一個(gè)完整的程序開始運(yùn)行。?Electron?按照我們的要求創(chuàng)建了窗口吱晒,加載指定的頁面文件甸饱。 窗口的樣式也與系統(tǒng)風(fēng)格完全一致。
作為初步了解仑濒,這是一個(gè)好的開端叹话。 為了實(shí)現(xiàn)更強(qiáng)大的軟件功能,還需要其它的一些工具和軟件庫墩瞳。 稍后的內(nèi)容即將介紹驼壶。