nodejs安裝
下載地址：https://nodejs.org/zh-cn/download/
為了穩(wěn)定性堪夭，建議下載node 10.17.0版本笙以。訪問https://nodejs.org/en/download/ 進(jìn)入Previous Releases颤专。 找到v10.17.0版本的敬矩，下載完成后嚼黔， 執(zhí)行安裝程序引有，根據(jù)引導(dǎo)完成安裝即可瓣颅。
安裝完成之后查詢node和npm的版本，確認(rèn)安裝是否成功譬正。
node -v
npm -v
如果上述命令均打印出一個(gè)版本號(hào)宫补，就說明Node.js已經(jīng)安裝好了！
注冊(cè)npm鏡像
不建議直接將npm設(shè)置為淘寶鏡像曾我，而是注冊(cè)cnpm指令粉怕。方便之后有選擇性的使用npm或者cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
Electron安裝
國外站點(diǎn)速度太慢，直接使用cnpm來安裝electron抒巢。
cnpm install -g electron
新建配置Electron項(xiàng)目
在相應(yīng)目錄新建項(xiàng)目目錄
mkdir eledemo
進(jìn)入目錄
cd eledemo
初始化項(xiàng)目贫贝，創(chuàng)建package.json
npm init -y
使用VSCode打開項(xiàng)目文件夾
code .
VSCode中無法使用cnpm需要使用以管理員身份PowerShell進(jìn)行授權(quán) （C:\WINDOWS\System32\WindowsPowerShell）
執(zhí)行set-ExecutionPolicy RemoteSigned命令，然后選A
添加electron依賴
cnpm install electron -S
修改package.json
{?
????"name":?"my_eleectron",?
????"version":?"1.0.0",??
????"description":?"",?
?????"main":?"index.js",?
?????"scripts":?{????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1"??},?
?????"keywords":?[],??"author":?"",??"license":?"ISC"
}
新建main.js文件
const?{app,BrowserWindow}?=?require('electron');
const?path?=?require('path')
const?url?=?require('url')
function?createWindow(){
????win?=new?BrowserWindow({
????????width:800,height:600,transparent:true,frame:true,resizable:true
????});
????const?URL?=?url.format({
????????pathname:path.join(__dirname,'index.html'),
????????protocol:'file:',
????????slashes:true
????});
????win.loadURL(URL);
????win.openDevTools();
????//?win.loadFile('index.html');
????win.on('closed',()=>{
????????console.log('closed');
????????win?=?null;
????});
}
app.on('ready',createWindow);
app.on('window-all-closed',()=>{
????console.log('window-all-closed');
????if(process.platform?!=?'darwin'){
????????app.quit();
????}
});
新建index.html文件
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<title>this?is?my?electron</title>
</head>
<body>
????<p>這是第一個(gè)Electron桌面應(yīng)用</p>
</body>
</html>
運(yùn)行項(xiàng)目
cnpm install
npm start
添加應(yīng)用圖標(biāo)文件logo.png
修改main.js文件
functioncreateWindow(){
????var?ico?=?path.join(__dirname,?'img',?'logo-28.png');
????//?Create?the?browser?window.????mainWindow?=?new?BrowserWindow({
????????width:?1024,
????????height:?640,
????????transparent:?false,
????????frame:?true,
????????icon:?ico,
????????resizable:?true?//固定大小????});
使用VSCODE調(diào)試Electron項(xiàng)目
打開VSCODE的調(diào)試窗口蛉谜，添加調(diào)試配置文件（nodejs）
{
????//?使用?IntelliSense?了解相關(guān)屬性稚晚。?
????//?懸停以查看現(xiàn)有屬性的描述。
????//?欲了解更多信息型诚，請(qǐng)?jiān)L問:?https://go.microsoft.com/fwlink/?linkid=830387????"version":?"0.2.0",
????"configurations":?[
????????{
????????????"type":?"node",
????????????"request":?"launch",
????????????"name":?"Electron?Main",
????????????"runtimeExecutable":?"${workspaceFolder}/node_modules/.bin/electron",
????????????"program":?"${workspaceFolder}/main.js",
????????????"protocol":?"inspector"?//添加默認(rèn)的協(xié)議是legacy客燕，這個(gè)協(xié)議導(dǎo)致不進(jìn)入斷點(diǎn)
????????}
????]
}
