1.打开cmd 输入 node -v ,npm -v查看是否安装了相应的环境,如果没有请自行安装 注意electron与node版本间存在关系 最好安装node在 v12…0.0以上吧
(升级了node后可能会影响以前的项目运行跟打包,须逐一更新各项目中低版本的依赖包)
2.npm install -g @electron-forge/cli 全局安装
3.npx electron-forge import,electron-forge是一个脚手架程序, 它可以帮我们快速构建一个electron应用
4.创建项目 npx create-electron-app my-app,执行后生成的结构如下图
package.json中main的指向就是入口文件的路径
5.运行项目 npm start
6.打包项目 npm run make
打包完成,自动生一个out文件
以下代码是写在入口文件 index.js中的
const { app, BrowserWindow } = require('electron');
const path = require('path');
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
// 隐藏菜单栏
const electron = require('electron')
const Menu = electron.Menu
Menu.setApplicationMenu(null)
const { globalShortcut } = require('electron')
// 创建一个窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// 初始化窗口最大
mainWindow.maximize()
mainWindow.show()
// 通过url引入外部网址
mainWindow.loadURL('https://www.baidu.com/')
// 注册打开开发者工具的快捷键
globalShortcut.register('Ctrl+Shift+b', function(){
mainWindow.webContents.openDevTools();
});
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});