Electron简单上手

最新推荐文章于 2024-01-23 18:09:03 发布

YANGGEOL

最新推荐文章于 2024-01-23 18:09:03 发布

阅读量101

点赞数

分类专栏：前端文章标签： electron javascript html

本文链接：https://blog.csdn.net/qq_46253184/article/details/118634811

版权

前端专栏收录该内容

27 篇文章 2 订阅

订阅专栏

安装Electron

初始化项目生成package.json

npm init

{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "A Test",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "electron": "electron ."
  },
  "author": "YANGGEOL",
  "license": "ISC"
}

安装Electron

npm install --save-dev electron
或
cnpm i electron -S

编写代码

main.js

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

app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        width: 500,
        height: 500
    })

    mainWindow.loadFile('./src/index.html')
})

html

先创建src文件夹再创建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ELectron</title>
</head>
<body>
    <h1>Hello YANGGEOL!</h1>
</body>
</html>