能找到该文章也大概知道electron干啥用的吧所以直接以下操作
1.安装 yarn add electron –dev 和 yarn add nodemon –dev
2.在package.json 写main入口和启动脚本
"main":"main.js", "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
"license": "MIT",
"main":"./electron/main.js", //我在根目录建的新文件electron/main.js 注意路劲 //新添加
"scripts": {
"dev": "vite",
"dev:prod": "vite --mode production",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview",
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue" //新添加
},
3.新建 main.js (electron配置文件)
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
// 窗口的大小
// 窗口的大小
//fullscreen: true //全屏
//frame: false, //让桌面应用没有边框,这样菜单栏也会消失
// width: 800, //设置窗口宽高
// height: 600,
// icon: iconPath, //应用运行时的标题栏图标
// minWidth: 300, // 最小宽度
// minHeight: 500, // 最小高度
// maxWidth: 300, // 最大宽度
// maxHeight: 600, // 最大高度
// 进行对首选项的设置
show: false,
webPreferences:{
// 定义预约加载的js
preload: path.resolve(__dirname, './preload/index.js')
}
// 当页面加载完毕的时候在显示窗口
win.on('ready-to-show', () => {
win.show()
})
})
// 窗口打开的数据
win.loadURL('http://localhost') //链接
// win.loadFile('index.html')//文件
// 打开发开工商
win.webContents.openDevTools()
}
//关闭黄色警告
`process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
恢复上次关闭窗口的位置和大小
安装 npm i electron-win-state --dev
main.js
const { app, BrowserWindow } = require('electron')
const WinState = require('electron-win-state').default
const winState = new WinState({})
const createWindow = () => {
const win = new BrowserWindow({
...winState.winOptions,
// 窗口的大小
// 窗口的大小
//fullscreen: true //全屏
//frame: false, //让桌面应用没有边框,这样菜单栏也会消失
// width: 800, //设置窗口宽高
// height: 600,
// icon: iconPath, //应用运行时的标题栏图标
// minWidth: 300, // 最小宽度
// minHeight: 500, // 最小高度
// maxWidth: 300, // 最大宽度
// maxHeight: 600, // 最大高度
// 进行对首选项的设置
webPreferences:{
// preload: path.resolve(__dirname, './preload/index.js')
}
})
winState.manage(win)
// 窗口打开的页面
win.loadURL('http://localhost') //链接
// win.loadFile('index.html')//文件
// 打开发开工商
win.webContents.openDevTools()
winState.manage(win)
}
app.whenReady().then(()=> {
createWindow()
})
添加菜单
创建 menu.js文件 之后 main.js引入 require('./menu')
//注意路劲
const { Menu } = require("electron");
const menuTemplate = [
{
label:"文件", // 菜单名
submenu:[ // 二级菜单
{
label:'新建',
accelerator:'ctrl+n', // 快捷键
click:()=>{ // 点击事件
console.log("create file")
}
},
{type: 'separator'}, // 分割线
{
label:'打开',
},
{
label:'保存',
}
],
},
{
label:"编辑",
submenu:[
{
label:'复制',
role:'copy', // 快捷键与系统冲突时可以使用role属性指定
click:()=>{
console.log("copy")
}
},
{
label:'粘贴',
role:'paste',
click:()=>{
console.log("paste")
}
},
{
label:'保存',
}
],
},
]
const menuBuilder = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menuBuilder)
打包
1.安装 yarn add electron-builder --dev
会安装在package.json文件下的devDependencies里
 or icon.png. Icon size should be at least 256x256.
needs to be placed in the buildResources directory (defaults to build). It is important to provide icon.ico (or icon.png), as otherwise the default Electron icon will be used.
翻译
'可选icon.ico(Windows应用程序图标)或icon.png。图标大小应至少为256x256。
需要放置在buildResources目录中(默认为build)。提供icon.ico(或icon.png)很重要,否则将使用默认的Electron图标。
4.打包 yarn electron-builder
//根据自己的配置打包
版权声明:本文为weixin_54645059原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。