直接通过electron创建项目
一、创建原始electron实例demo1
1、创建项目目录demo1
2、通过命令初始化项目配置文件package.json
命令：npm init -y
项目目录下生成packabe.json文件
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs"
}
3、安装electron,默认国外镜像安装较慢
命令：npm install electron --save-dev
最好使用国内镜像安装命令：cnpm install electron --save-dev
注册国内镜像命令：npm config set registry https://registry.npm.taobao.org
或者使用官方源：
npm config set registry https://registry.npmjs.org
提示也上处理无法安装electron
最终安装了cnpm成功安装了electron
在命令行中运行以下命令来全局安装cnpm：
npm install -g cnpm --registry=https://registry.npmmirror.com
这里使用--registry=https://registry.npmmirror.com指定了cnpm的镜像源为中国镜像，这可以加快下载速度。
使用 cnpm 安装 electron
安装完cnpm后，你可以使用它来安装electron。在命令行中运行以下命令：
cnpm install electron
或者，如果你正在开发一个项目并希望将electron作为项目依赖添加到你的package.json文件中，你可以使用：
cnpm install electron --save-dev
这将把electron添加到你的开发依赖中。
验证安装
安装完成后，你可以通过运行以下命令来验证electron是否正确安装：
npx electron --version
或者，如果你已经全局安装了electron，你也可以直接运行：
electron --version
这应该会显示你安装的electron版本号。
4、通过packages.json文件可以看到"main": "index.js"入口文件为index.js文件
由于 Electron 的主进程是 Node.js 运行时，因此你可以使用 electron 命令执行任意 Node.js 代码（你甚至可以将其用作 REPL）。要执行此脚本，请将 electron . 添加到 package.json 的 scripts 字段中的 start 命令中。该命令将告诉 Electron 可执行文件在当前目录中查找主脚本并在开发模式下运行它。
package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "index.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
5、创建index.js文件，内容如下：
const { app, BrowserWindow } = require('electron/main')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
6、index.js中加载了index.html文件，创建index.html文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>��</p>
<p id="info"></p>
</body>
<script src="./renderer.js"></script>
</html>
7、通过命令运行electron程序：npm run start
8、在vscode中运行调试
如果要使用 VS Code 调试应用，则需要将 VS Code 附加到主进程和渲染器进程。这是供你运行的示例配置。在项目中的新 .vscode 文件夹中创建 launch.json 配置：
.vscode/launch.json
{
"version": "0.2.0",
"compounds": [
{
"name": "Main + renderer",
"configurations": ["Main", "Renderer"],
"stopAll": true
}
],
"configurations": [
{
"name": "Renderer",
"port": 9222,
"request": "attach",
"type": "chrome",
"webRoot": "${workspaceFolder}"
},
{
"name": "Main",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": [".", "--remote-debugging-port=9222"],
"outputCapture": "std",
"console": "integratedTerminal"
}
]
}
当你从侧边栏中选择 "运行和调试" 时，将会出现 "主+渲染器" 选项，允许你设置断点并检查主进程和渲染器进程中的所有变量。
我们在 launch.json 文件中所做的是创建 3 个配置：
Main 用于启动主进程，并公开端口 9222 用于远程调试（--remote-debugging-port=9222）。这是我们用来连接 Renderer 调试器的端口。由于主进程是 Node.js 进程，因此类型设置为 node。
Renderer 用于调试渲染器进程。因为主进程是创建进程的进程，所以我们必须对其进行 "attach" ("request": "attach")，而不是创建一个新进程。渲染器进程是一个 Web 进程，所以我们必须使用的调试器是 chrome。
Main + renderer 是同时执行前面的 复合任务。
浙公网安备 33010602011771号