Electron+vue3+vite+ts开发桌面端运用

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文件新增入口文件，和执行命令

"main": "main.ts",
"scripts": {
    "dev": "vite",
    "start": "nodemon --exec electron . --watch ./ --ext .js,.ts,.html,.css"
  },

5.先运行vue3项目，再运行electron项目

npm run dev
npm run start

6.运行截图

image.png