！！！前景提要：若操作步骤时有任何意外现象，请看下方问题收纳记录，其解决方案在更下方的‘链接’中，若无对应的问题现象，请先另寻出路。另外，欢迎在评论区或私信说明您遇到的问题，本人看到并有解决办法的话会进行问题收录，以帮助更多的人。

操作步骤：

  步骤一：
  在终端中指定到要存放工程的磁盘路径，项目文件夹随后会自动生成于此。

  成功示例： 暂无展示

  步骤二：
  终端输入npm create vite@latest实现vite的快速创建与部署，这里根据提示需要输入三个信息，其中project name为项目名称，select a framework为选择开发框架，select a variant为选择脚本语言（这里没用过ts的建议选择js，少走弯路），成功后会生成一个项目文件夹，随后将终端路径cd到该文件夹下。

  成功示例： 已生成目标项目文件

  步骤三：
  终端输入npm init以实现对配置文件package.json的部分修改，这里根据提示需要输入 package name包名、version版本号、entry point主程序入口文件（默认是index.js）、git repositorygit库、keywords关键字、auther作者名、license授权信息，可直接回车默认，成功后会自动生成一个package.json配置文件。

  接着终端先输入npm install来更新配置树，接着输入npm run dev即可运行vite，显示以下结果即vite已运行，点击链接即可查看默认网页效果。

  成功示例：

  步骤四：
  终端输入npm install electron@latest实现electron的安装与部署，会发现多了一个node_modules文件夹。

  然后创建步骤三中的接口程序index.js，我这里放在了创建的文件夹electron里。

  记得保证package.json文件中的主程序入口文件要和这个文件路径保持一致

  然后在刚刚创建的index.js中添加以下测试代码。

import { app, BrowserWindow } from "electron";
let win;

// 创建窗口函数
const createWindow = () => {
  win = new BrowserWindow({
    width: 1200, // 窗口宽度
    height: 800, // 窗口高度
    minWidth: 1200, // 窗口最小宽度
    minHeight: 800, // 窗口最小高度
    center: true, // 窗口居中显示
    skipTaskbar: false, // 在任务栏中显示窗口
    transparent: false, // 窗口不透明
    webPreferences: {
      contextIsolation: false, // 上下文隔离关闭
      webSecurity: false, // 网络安全关闭
    },
  });

  // 加载本地开发服务器地址
  win.loadURL("http://localhost:5173/");

  // 打开开发者工具
  win.webContents.openDevTools();
};

// 当应用准备就绪后创建窗口
app.whenReady().then(() => {
  createWindow();
});

// 请求单实例锁
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  // 如果获取失败，则退出应用
  app.quit();
} else {
  // 如果尝试打开第二个实例，则聚焦到当前窗口
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    if (win) {
      if (win.isMinimized()) win.restore(); // 如果窗口最小化了，则恢复窗口
      win.focus(); // 窗口聚焦
    }
  });
}

// 当所有窗口都关闭时退出应用（在 macOS 上除外）
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

  接下来终端输入npm run dev运行本地服务。

  另起一个终端输入electron .来运行应用。

  成功示例：

已收纳的问题：

  暂且未收纳任何问题，您可以通过评论区留言或者是私信的方式先提供问题信息给我，以帮助解决

参考：

  https://www.cnblogs.com/nicoz/p/16468299.html
  描述：创建vite+vue3+ts项目
  https://blog.csdn.net/qubernet/article/details/104391890
  描述：使用VSCode开发Electron的初步入门
  https://blog.csdn.net/qq_19991931/article/details/130429607
  描述：快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子，快速安装Electron)