Electron入门示例

坐吃山猪2025-12-03 9:02

Electron入门示例

将知识图谱进行可视化展示，当前是针对开源项目进行复现

1-思路整理

1-使用cnpm替带npm
2-安装electron
3-使用electron进行开发

4-执行package.json中的脚本运行

json 复制代码

{
"name": "electron-hello",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package_mac": "electron-builder --mac",
"package_win": "electron-builder --win"
},
"keywords": [

    ],
    "author": "",
    "license": "ISC",
    "description": "",
    "devDependencies": {
        "electron": "^39.2.4",
        "electron-builder": "^26.0.12"
    },
    "dependencies": {

    }
}

2-参考网址

NPM使用踩坑：https://blog.csdn.net/2301_77717148/article/details/146022491

3-动手实操

1-安裝cnpm

shell 复制代码

# 安装cnpm-已安装可跳过
- 下载安装cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

- 使用cnpm下载(安装示例)
cnpm install typescript

- 使用cnpm全局安装
cnpm install -g live-server

2-安装electron

1-新建空文件夹并初始化

bash 复制代码

mkdir electron-hello && cd electron-hello
npm init -y
npm install electron electron-builder --save-dev

2-创建主进程入口 `main.js`

如果运行报错就改为inde.js

js 复制代码

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

3-创建展示页面 `index.html`

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron Hello</title>
  <style>
    body { font-family: sans-serif; text-align: center; margin-top: 40vh; }
  </style>
</head>
<body>
  <h1>👋 Hello Electron!</h1>
  <p>用前端技术写桌面应用就是这么简单。</p>
</body>
</html>

4-在 `package.json` 里加一条启动命令

json 复制代码

{
  "scripts": {
    "start": "electron ."
  }
}

5-运行

bash 复制代码

npm start

窗口弹出即代表环境 OK，后续可继续拓展文件读写、菜单、多窗口等高级功能。

Electron入门示例

Electron入门示例

1-思路整理

2-参考网址

3-动手实操

1-安裝cnpm

2-安装electron

1-新建空文件夹并初始化

2-创建主进程入口 main.js

3-创建展示页面 index.html

4-在 package.json 里加一条启动命令

5-运行

2-创建主进程入口 `main.js`

3-创建展示页面 `index.html`

4-在 `package.json` 里加一条启动命令