VSCode创建 electron 项目

首先，确保你的系统已经安装了以下工具：

1、Node.js：前往 Node.js 官方网站（https://nodejs.org/）下载并安装最新版本的 Node.js。

2、npm：Node.js 安装完成后，npm 会一同安装。你可以通过运行

3、在VsCode中打开JK1-PZK22项目，在终端窗口输入 npm create vite@latest vite-vue3-project -- --template vue-ts来使用vite创建一个vue3的electron项目（这里首先需要安装vite（前端构建））("vite-vue3-project ")为项目名自己取。

4、安装yarn 在终端输入'npm install -g yarn'命令

5、本地打开cmd窗口，输入：yarn -v，如果成功出现版本号，则说明前面2.2步骤安装yarn配置环境成功。

6、yarn : 无法加载文件 C:\Users[UserName]\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。

        1.运行 Windows PowerShell（管理员），执行命令set-ExecutionPolicy RemoteSigned更改 PowerShell 执行策略，过程中提示询问是否要更改执行策略?，选择 A 或 Y 。

        2.设置完毕，检验执行yarn config get registry命令，可正常加载执行脚本。
        3.使用get-ExecutionPolicy命令，可查看当前 PowerShell 执行策略类型。

        4.在 VSCode 的终端查看 yarn 版本，发现版本为：1.22.19 (即：yarn 问题被解决)：

7、使用cd vite-vue3-ts-electron进入文件夹。

8、执行yarn install或者npm i命令（安装依赖）。

9、使用yarn dev运行项目查看效果。

10、接着我们执行yarn add -D electron命令给项目添加elecreon相关包。

若 npm 版本过高导致无法设置上述环境变量则需自行设置系统环境变量然后重启电脑

11、我们在终端执行yarn add -D electron命令给项目添加elecreon相关包。

12、再使用yarn add -D electron-builder安装electron-builder(打包)。

13、使用yarn add -D electron-devtools-installer安装electron-devtools-installer(调试和开发)。

14、使用yarn add -D vite-plugin-electron安装vite-plugin-electron(渲染进程中使用Node API或者Electron API)。

15、接着我们初始化electron，新建main.js代码如下：

const { app, BrowserWindow } = require("electron");
const { join } = require('path');
// 主进程
const createWindow = () => {
  const win = new BrowserWindow({
    // 窗口大小
    width: 800,
    height: 600,
    // 最小的窗口大小
    minHeight: 300,
    minWidth: 400,
    // 窗口是否显示
    show: true,
    // 是否可以拖动
    movable: true,
    // 是否有顶部状态栏，拖动条
    // frame: false,
    // 导致隐藏的标题栏和完整大小的内容窗口
    // titleBarStyle: "default",
    // 窗口初始背景颜色
    backgroundColor: "aliceblue",
  });
  // Development 模式
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL);

        // 开启调试台
        win.webContents.openDevTools();
    } else {
        win.loadFile(join(__dirname, 'vite-vue3-ts-electron/index.html'));
    }
  // 打开调试工具
  win.webContents.openDevTools();

  // 给窗口转载页面
  win.loadFile("./render/index.html");

  win.once("ready-to-show", () => {
    win.show();
  });
};

app.on("window-all-closed", () => {
  console.log("window-all-closed");

  // 对于 MACOS 系统，关闭窗口时，不会直接推出应用
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.whenReady().then(() => {
  createWindow();
  // 在 MacOS 下，当全部窗口关闭，点击 dock 图标，窗口再次打开。
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });

  // console.log(app.isReady())
  // console.log(app.getPath('desktop'))
  // console.log(app.getPath('music'))
  // console.log(app.getPath('temp'))
  // console.log(app.getPath('userData'))

  // console.log(BrowserWindow.getAllWindows().length)
});

process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";

16、修改package.json，代码如下：

{
  "name": "vite-vue3-ts-electron",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "vite --host",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "electron": "^26.2.1",
    "electron-builder": "^24.6.4",
    "electron-devtools-installer": "^3.2.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-electron": "^0.14.1"
  }
}

17、使用yarn dev运行查看修改后效果如下：