electron 快速创建一个本地应用

参考官方文档流程  快速入门 | Electron

建议先全局安装electron，npm install -g electron 开发过程中可以在本地开发安装

使用electron快速创建一个web页面  ，参考官方demo 实例 electron-quick-start

第一步：

• mkdir my-electron-app && cd my-electron-app 创建一个文件夹并且进入文件
• npm init 初始化文件
• npm install --save-dev electron 安装electron环境
• 最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

{

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

第二步：

在你本地的文件中创建  main.js  入口文件，引入electron

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

app.whenReady().then(() => {
  // 创建一个web窗口
  const mainWin = new BrowserWindow({
    width: 600,
    height: 400,
  });
  
  // 引入页面要展示的文件
  mainWin.loadFile("index.html");

  // 监听当前窗口关闭要做的事情
  mainWin.on("close", () => {
    console.log("close");
  });
});

// 监听所有窗口关闭要做的事情
app.on("window-all-closed", () => {
  console.log("window-all-closed");
  app.quit(); // 窗口关闭api
});

第三步：

本次创建index.html

    
    
    


    
桌面应用

第四步：

运行 npm start 命令，即可展示如下界面