Electron + Vite 项目模板使用指南

Electron + Vite 项目模板使用指南

electron-vite-boilerplate 📚 Really simple Electron + Vite boilerplate. 项目地址: https://gitcode.com/gh_mirrors/ele/electron-vite-boilerplate

1. 项目的目录结构及介绍

项目目录结构如下：

electron-vite-boilerplate/
├── .github/
├── .vscode/
├── electron/
│   ├── main/         # Electron 主进程文件
│   │   └── index.ts  # Electron 主进程入口文件
│   └── preload/      # 预加载脚本文件
│       └── index.ts  # 预加载脚本入口文件
├── public/            # 公共文件，如静态资源等
├── src/               # 渲染进程文件
│   └── main.ts        # 渲染进程入口文件
├── index.html         # 主页HTML文件
├── package.json       # 项目配置文件
└── vite.config.ts     # Vite 配置文件

• .github/：存放与GitHub相关的配置文件。
• .vscode/：Visual Studio Code 的项目配置文件。
• electron/：存放与Electron主进程相关的代码。
  • main/：主进程的业务逻辑代码。
  • preload/：预加载脚本的代码，用于在渲染进程中暴露需要在全局范围内使用的功能。
• public/：存放公共的静态资源，如图片、样式表等。
• src/：存放渲染进程的代码。
• index.html：项目的主HTML页面。
• package.json：项目的配置文件，包含项目的依赖、脚本等。
• vite.config.ts：Vite的配置文件，用于自定义Vite的行为。

2. 项目的启动文件介绍

项目的启动文件主要是指index.html和electron/main/index.ts。

• index.html：作为项目的主页面，通常包含页面结构和一些初始的JavaScript代码。它将加载渲染进程的入口脚本main.ts。

• electron/main/index.ts：Electron主进程的入口文件，负责创建应用窗口、处理应用的生命周期事件等。以下是主进程的基本结构：

import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 预加载脚本
      preload: `${__dirname}/preload/index.ts`
    }
  });

  // 并加载应用的 index.html
  mainWindow.loadFile('index.html');

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

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，通常会重新创建一个窗口
  if (mainWindow === null) {
    createWindow();
  }
});

3. 项目的配置文件介绍

项目的配置文件主要包括package.json和vite.config.ts。

• package.json：项目的配置文件，定义了项目的名称、版本、描述、入口文件、依赖关系、脚本等。以下是package.json的一个基本示例：

{
  "name": "electron-vite-boilerplate",
  "version": "1.0.0",
  "main": "electron/main/index.js",
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "dev": "vite --mode development"
  },
  "dependencies": {
    // ...项目依赖
  },
  "devDependencies": {
    // ...开发依赖
  }
}

• vite.config.ts：Vite的配置文件，用于自定义Vite的行为。以下是vite.config.ts的一个基本示例：

import { defineConfig } from 'vite';
import { config } from 'electron';

export default defineConfig({
  // 配置选项
  plugins: [],
  build: {
    // 构建配置
  },
  // ...其他配置
});

以上是关于Electron + Vite项目模板的基本介绍，希望对您有所帮助。

electron-vite-boilerplate 📚 Really simple Electron + Vite boilerplate. 项目地址: https://gitcode.com/gh_mirrors/ele/electron-vite-boilerplate