使用Electron + vite创建electron项目流程

准备

node版本：vite需要node的版本在18+以上

创建vite项目下载依赖

```
npm init vite 

cd [project-name]

npm install
```

安装electron

```
npm install --save-dev electron
or 
cnpm install --save-dev electron
```

electron 目录结构

根目录下主要有index.html、package.json、main.js、preload.js文件

设置electron框架

1、main.js 基本的设置

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });
    // 注意：
  //  因为我们加载的是Vue 构建后的dist 目录，所以我们需要改一下， load
  //  的文件地址。
  win.loadFile("dist/index.html");
}

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

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

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

2、preload.js

window.addEventListener("DOMContentLoaded", () => {
     console.log(' Hello Electron');
});

3、package.json

{
  "name": "electron-project",
  "private": true,
  "version": "0.0.0",
  "type": "module", //这个要去掉
  "main": "main.js", // 添加main字段
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "electron ." //添加启动electron命令
  }

创建完成 最后使用element-ui的话自行下载