实现一个最简单的electron项目

前置准备

1、首先确认电脑上已经安装了npm,我们需要使用npm管理第三方依赖
2、安装VSCode编辑器,或者也可以使用cmd或者PowerShell

创建项目

1、在磁盘上新建一个空白文件夹electron_demo,并使用VSCode打开文件夹(如果使用cmd、powershell,需要cd到空白文件夹路径下)

2、使用npm init初始化项目,过程中全部选择默认选项,完成初始化后在根目录生成package.json文件

{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.0.0"
  }
}

3、使用npm install --save-dev electron拉取electron依赖包,完成后会在根目录生成node_modules文件夹和package-lock.json文件

4、创建index.jsindex.html文件,其中index.js文件对应的是package.json文件中main字段,这个文件是electron项目运行后的主进程

5、在index.js文件中添加新建electron窗口的逻辑代码,在index.html文件中添加页面结构代码

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

// mainWindow 定义为全局变量,避免被GC回收
mainWindow = null; 

function createWindow(){
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载index.html
    mainWindow.loadFile('index.html');
}

app.on('ready', ()=>{
    createWindow()
})
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>Documenttitle>
head>
<body>
    <h1>Hansel.wnh1>
body>
html>

6、运行electron_demo项目,这时候在控制台根目录下执行electron .可以启动项目;此外,也可以在package.json中添加Election运行指令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },

这时,使用npm start命令就可以启动electron项目了。
实现一个最简单的electron项目_第1张图片

你可能感兴趣的:(electron,前端)