以Svelte + Vite +VS Code框架开发的Web项目为例：
1、安装必要的工具： 确保你已经在系统中安装了Node.js和npm（Node.js包管理器）。你可以从官方网站下载并安装Node.js：Node.js官网。
2、打开VS Code： 打开VS Code编辑器。
3、创建新的Electron项目文件夹： 在VS Code中选择一个合适的文件夹，并在其中创建一个新的文件夹来存放你的Electron项目。
4、初始化项目： 打开VS Code的终端（Terminal），并在选定的文件夹中执行以下命令来初始化一个新的Node.js项目：
npm init -y
这将创建一个默认的package.json文件。
5安装Electron依赖： 在终端中执行以下命令来安装Electron依赖：
bash
npm install electron
这将在你的项目中安装Electron并将其添加到package.json文件的依赖列表中。
6、通过Vite打包WEB项目： 将打包后的文件拷贝到Electron项目文件夹的dist下。
7、创建Electron入口文件： 在项目文件夹中创建一个Electron的入口文件，例如main.js。这将是Electron应用程序的主要入口点。
8、在main.js中编写代码： 在main.js文件中编写Electron应用程序的启动代码。例如：
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
//index.html 根据自己项目替换
mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
8、修改Electron的package.json： 在Electron项目中创建一个package.json文件，并确保指定了正确的入口文件和其他相关信息。例如：
{
"name": "com-web-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^29.1.1",
"electron-builder": "^24.13.3",
"electron-packager": "^17.1.2"
}
}
9、新建electron-builder.json： 在Electron项目中创建一个electron-builder.json文件。例如：
{
"appId": "com.my.app",
"productName": "myapp",
"directories": {
"output": "build"
},
"files": [
"dist/**/*",
"main.js"
],
"extends": null,
"mac": {
"target": "dmg"
},
"win": {
"target": "nsis"
}
}
10、运行项目： 在终端中执行以下命令来启动Electron应用程序：
electron .
11、构建项目： 在终端中执行以下命令来启动Electron应用程序：
npm run build
这将启动Electron应用程序，并在Electron窗口中显示你在index.html中编写的内容。
5031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
