（一）vite创建vue3项目

按照下面的顺序创建一个vue3项目

1. npm init vite-app 项目名称
2. cd 项目名称
3. npm install
4. npm run dev
5. npm install electron electron-builder -save-dev

1. npm init vite-app electron-vue3-to-do

如果你之前没有安装过vite,会提示：Need to install the following packages:，按下y健，会自动安装

2. 打开项目文件目录，执行npm install，安装依赖

看一下我们的package.json文件，运行npm run dev

3. 下面来安装electron, 执行npm install electron electron-builder -save-dev

那如何将vue项目包在electron壳子里面呢，启动vue项目的命令是 vite, 启动electron的命令是electron ., 如果这两个命令同时执行，不就解决问题了吗

我们可以用currently

package.json

{
  "name": "electron-vue3-to-do",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "concurrently \"vite\" \"electron .\""
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "main": "src/background.js",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.4",
    "concurrently": "^8.2.2",
    "electron": "^28.1.3",
    "electron-builder": "^24.9.1",
    "vite": "^1.0.0-rc.13"
  }
}

5、electron 入口文件

新建一个background.js文件

const { app, BrowserWindow } = require("electron/main");
const path = require("node:path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true
    // webPreferences: {
    //   preload: path.join(__dirname, 'preload.js')
    // }
  });

  win.loadURL("http://localhost:3000/");
}

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

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

执行 npm run start ，项目就能跑起来了

但是有一个问题，修改background.js时，无法热重载（HMR）？？？慢慢探索研究吧，带着问题去学习~