1.初始化vue3項目
npm create vue@latest
2.安裝electron、electron-win-state
npm i electron -D
npm i electron-win-state
3.根目錄新增main.ts文件
const { app, BrowserWindow} = require('electron')
const WinState = require('electron-win-state').default
const path = require('path')
const createWindow = () => {
const winState = new WinState({
defaultWidth: 1000,
defaultHeight: 800
})
const win = new BrowserWindow({
...winState.winOptions,
webPreferences: {
preload: path.resolve(__dirname, './app/preload.ts')
}
})
winState.manage(win);
// 加載vue3項目
win.loadURL("http://localhost:5173/")
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
4.package.json文件新增入口文件，和執(zhí)行命令
"main": "main.ts",
"scripts": {
"dev": "vite",
"start": "nodemon --exec electron . --watch ./ --ext .js,.ts,.html,.css"
},
5.先運(yùn)行vue3項目，再運(yùn)行electron項目
npm run dev
npm run start
6.運(yùn)行截圖
![]()
image.png
image.png
