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
