electron安装笔记

最新推荐文章于 2025-05-30 09:00:44 发布

原创最新推荐文章于 2025-05-30 09:00:44 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron #学习 #笔记

1.node下载：Node.js — 在任何地方运行 JavaScript

2.验证安装：node -v npm -v

3.创建项目目录并初始化

mkdir electron-app && cd electron-app
npm init -y

3.安装electron

npm install electron --save-dev

注：有时因为网络原因，npm会失败，可以安装cnpm

4.创建main.js并添加如下内容

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

5.创建index.html创建进程渲染文件并添加如下内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="padding: 20px;">
  <h1>Hello World!</h1>
  <p>欢迎使用Electron应用</p>
  <script>
    // 这里可以编写渲染进程的JavaScript代码
  </script>
</body>
</html>

6.配置package.json文件

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",//根据项目修改
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.4.0"
  }
}

7.启动测试应用

npm start

8.配置自动启动,安装nodemon并修改Package.json

1:
控制台安装：npm i nodemon -D
修改package.json文件
"scripts": {
    "start": "nodemon --exec electron ."
  },
2:新建nodemon.json文件添加如下内容

{
    "ignore": [
        "node_modules",
        "dist"
    ],
    "restart":"r",
    "watch":["*.*"],
    "ext":"html,css,js,json,ts,tsx,jsx"
}