1.安装electron

npm install -g electron

image.png

2.创建electron项目

2.1克隆electron模板代码

git clone https://github.com/electron/electron-quick-start.git

image.png

2.2.electron-forge
electron-forge相当于electron的脚手架 可以更方便我们创建 运行 打包electron项目

npm install -g electron-forge

electron-forge init electron-app

2.3通过electron手动创建项目

新建文件夹

新建index.html  main.js

main.js:
// 引入electron
var electron = require("electron");


// 创建electron引用
var app = electron.app

// 创建electron BrowserWindow引用
var BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on("ready", () => {
    // 创建一个BrowserWindow实例赋值给win打开窗口
    /**
     * xy是相对于屏幕的位置
     *  x:200,
        y:20
     *  fullscreen:true --- 全屏
     */
    mainWindow = new BrowserWindow({
       show:false
    });
    mainWindow.loadFile("index.html");

    mainWindow.on("ready-to-show",()=>{
      mainWindow.show();
    })

    mainWindow.on("closed",()=>{
        mainWindow = null;
    })
})

npm  init

npm i 

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

3.打开项目

npm install


npm start

image.png