Electron學習筆記（1）：VSCODE開發環境配置
nodejs安裝
下載地址：https://nodejs.org/zh-cn/download/
為了穩定性，建議下載node 10.17.0版本。訪問https://nodejs.org/en/download/ 進入Previous Releases。 找到v10.17.0版本的，下載完成后， 執行安裝程序，根據引導完成安裝即可。
安裝完成之后查詢node和npm的版本，確認安裝是否成功。
node -v
npm -v
如果上述命令均打印出一個版本號，就說明Node.js已經安裝好了！
注冊npm鏡像
不建議直接將npm設置為淘寶鏡像，而是注冊cnpm指令。方便之后有選擇性的使用npm或者cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
Electron安裝
國外站點速度太慢，直接使用cnpm來安裝electron。
cnpm install -g electron
新建配置Electron項目
在相應目錄新建項目目錄
mkdir eledemo
進入目錄
cd eledemo
初始化項目，創建package.json
npm init -y
使用VSCode打開項目文件夾
code .
VSCode中無法使用cnpm需要使用PowerShell進行授權
執行set-ExecutionPolicy RemoteSigned命令，然后選A
添加electron依賴
cnpm install electron -S
修改package.json
{
"name": "eledemo",
"version": "1.0.0",
"description": "This is an electron demo project.",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^8.2.5"
}
}
新建main.js文件
const electron = require('electron');
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 640,
transparent: false,
frame: true,
resizable : true //固定大小
});
const URL = url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})
mainWindow.loadURL(URL);
console.log(URL);
mainWindow.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
新建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hello! This is an electron project.
</body>
</html>
運行項目
cnpm install
npm start
添加應用圖標文件logo.png
修改main.js文件
function createWindow() {
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調試Electron項目
打開VSCODE的調試窗口，添加調試配置文件（nodejs）
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: 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" //添加默認的協議是legacy，這個協議導致不進入斷點
}
]
}