Electron入门示例

Electron入门示例

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

1-思路整理

• 1-使用cnpm替带npm

• 2-安装electron

• 3-使用electron进行开发

• 4-执行package.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

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

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

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

---

2-安装electron

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

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

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

如果运行报错就改为inde.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

<!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 里加一条启动命令

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

5-运行

npm start

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

---