首先,你需要先裝好nodejs,且能使用npm
只要在cmd內輸入: npm -v 有顯示版本號就表示有成功啦~
( 因為npm是global的所以在哪裡都可以下指令 )
然後呢先介紹一下npm一些常用的指令:
[安裝套件] npm install xxx
[安裝套件且寫入Package.json]
--save-dev: Package will appear in your devDependencies
--save: Package will appear in your dependencies
[安裝全域套件] npm install xxx -g 會安裝到C:\Users\[Username]\AppData\Roaming\npm
[安裝package.json套件] npm install
[解除安裝套件] npm uninstall xxx
[解除安裝全域套件] npm uninstall xxx -g
[列出套件] npm ls
[列出套件詳細資訊] npm ls -l
[列出全域套件] npm ls -g
[列出全域套件詳細資訊] npm ls -gl
[更新套件] npm update
[更新全域套件] npm update -g
再來我們就挑一個資料夾當作我們的專案資料夾
1. npm 初始化
首先我們需要先初始化資料夾,用意只是為了幫你建一個package.json,這樣就不用自己手刻了
指令: npm init -y ( -y是默認產生package.json )
2. npm 安裝 electron
Electron在v1.3.1 以前都是需要安裝electron-prebuilt,之後的版本改為安裝electron
指令: npm install electron --save--dev
3. 建立 electron 執行入口的 JS
這時候我們先建立一個 main.js,用意是要讓electron去執行這個JS,我們會在裡面做一些初始化的動作
BrowserWindow就是一個視窗,要有畫面首先我們要先new一個BrowserWindow
裡面會指定這個BrowserWindow要載入的html
4. 執行electron
這個部份我們可以利用npm的scripts的功能,下面是我package.json的部分內容
"scripts": {
"start": "electron ./src/main.js",
"testla": "npm -v"
},
scripts的意思就是腳本
你可以透過scripts去自定義腳本,省去每次都要打一堆指令的時間
以上面的例子來說,start內的腳本為透過electron來執行./src/main.js這支JS
testla則是透過npm -v來確認npm版本
這時候我們只要在專案資料夾內使用npm run 腳本名稱,就可以使用啦~