VSCode creates electron project

4. Install yarn and enter the 'npm install -g yarn' command in the terminal

5. Open the cmd window locally and enter: yarn -v. If the version number appears successfully , indicating that the installation of the yarn configuration environment in the previous step 2.2 is successful.

6. yarn: Unable to load file C:\Users[UserName]\AppData\Roaming\
pm\yarn.ps1 because Scripting is prohibited on this system.

1. Run Windows PowerShell (administrator), execute the command set-ExecutionPolicy RemoteSigned to change the PowerShell execution policy. During the process, you will be asked whether you want to change the execution policy?, select A or Y.

2. After the setting is completed, check and execute the yarn config get registry command to load the execution script normally.
3. Use the get-ExecutionPolicy command to view the current PowerShell execution policy type.

4. Check the yarn version in the VSCode terminal and find that the version is: 1.22.19 (that is, the yarn problem is solved):

7. Use cd vite-vue3-ts-electron to enter the folder.

8. Execute yarn install or npm i command (to install dependencies).

9. Use yarn dev to run the project to check the effect.

10. Then we execute the yarn add -D electron command to add elecreon-related packages to the project .

If the npm version is too high and the above environment variables cannot be set, you need to set the system environment variables yourself and then restart the computer.

11. We execute the yarn add -D electron command in the terminal to add elecreon related packages to the project.

12. Then use yarn add -D electron-builder to install electron-builder (packaging).

13. Use yarn add -D electron-devtools-installer to install electron-devtools-installer (debugging and development).

14. Use yarn add -D vite-plugin-electron to install vite-plugin-electron (use Node API or Electron API in the rendering process).

15. Then we initialize electron and create the new main.js code as follows:

const { app, BrowserWindow } = require("electron");
const { join } = require('path');
// main process
const createWindow = () => {
  const win = new BrowserWindow({
    // window size
    width: 800,
    height: 600,
    //Minimum window size
    minHeight: 300,
    minWidth: 400,
    // Whether the window is displayed
    show: true,
    // Whether it can be dragged
    movable: true,
    // Whether there is a top status bar and drag bar
    // frame: false,
    // Result in hidden title bar and full size content window
    // titleBarStyle: "default",
    // Window initial background color
    backgroundColor: "aliceblue",
  });
  // Development mode
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL);

        //Open the debugging console
        win.webContents.openDevTools();
    } else {
        win.loadFile(join(__dirname, 'vite-vue3-ts-electron/index.html'));
    }
  //Open debugging tools
  win.webContents.openDevTools();

  // Reprint the page to the window
  win.loadFile("./render/index.html");

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

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

  // For MACOS systems, when closing the window, the application will not be launched directly
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.whenReady().then(() => {
  createWindow();
  // Under MacOS, when all windows are closed, click the dock icon to open the window again.
  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. Modify package.json, the code is as follows:

{
  "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 & amp; & amp; 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. Use yarn dev to run and check the modified effect as follows: