需求

如何在 vscode 里面创建一个新的 electron + vue3 项目？

解决

创建项目

创建 vite 项目

vscode 上层目录，创建 vite 项目的文件夹

  1. cnpm init vite
  2. readit
  3. vue
  4. javascript

安装 electron

  1. npm i electron -D
  2. 修改 package.json: “electron”: “^26.6.10”, 然后 cnpm install

使用项目

使用 vite 项目

  1. cnpm install
  2. cnpm run dev 即可启动 vite 项目

main

新增 package.json: “main”: “main.js”

main.js

const { app, BrowserWindow } = require('electron')

const createWindow = () => {

    const win = new BrowserWindow({
      width: 1000,
      height: 800,
    })

    win.loadURL('http://localhost:5173')

}

app.whenReady().then(() => {
    createWindow()
})

去除 type

package.json 中，删除 “type”: “module”, 否则会报错

设置启动

package.json: “start”: “electron .”

启动项目

  1. npm run dev, 启动 vue
  2. npm run start, 启动 electron

参考