使用electron创建应用程序的基础步骤

Hello-Mr.Wang2025-05-30 16:48

1.创建文件夹，并初始化

cd xxx-app

npm init

2.安装electron

复制代码

npm install electron --save-dev

3.根目录下创建index.html

复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <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>
  </body>
</html>

4.创建入口文件main.js

复制代码

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

5.在package.json文件中添加启动项配置

复制代码

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

6.启动项目

复制代码

npm run start