npm initnpm install electron -dev npm install electron --unsafe-perm=truenpm install --verbose electron工程目录结构如下
index页面
<!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>
<p>This is test pag!</p>
</body>
</html>main.js页面
const { app, BrowserWindow, ipcMain } = require('electron');
//const edge = require('electron-edge-js');
const path = require('path');
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 400
}),
win.loadFile(path.join(__dirname, 'index.html'));
//打开页面调试功能
win.webContents.openDevTools();
}
app.on('ready', createWindow){
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"compounds": [{
"name": "Electron",
"configurations": [
"Electron Main",
"Electron Renderer"
]
}],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"args": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9333" //Set debugging port for renderer process
],
"protocol": "inspector" //Specify to use v8 inspector protocol
},
{
"type": "node",
"request": "attach",
"name": "Electron Renderer",
"protocol": "inspector",
"port": 9333
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\main.js"
}
]
}最终效果图
转载于:https://www.cnblogs.com/ants_double/p/10489030.html