Vite Electron 快速入门指南

Vite Electron 快速入门指南

vite-electron-quick⚡️Starter template with Vite2 Vue3 and Electron 11.x /使用 Vite2 Vue3 以及 Electron 11.x 打造的快速启动模版。项目地址:https://gitcode.com/gh_mirrors/vi/vite-electron-quick

本指南将带领您深入了解 MangoTsing/vite-electron-quick 这一开源项目。我们将从项目的目录结构开始，逐步剖析启动文件以及关键的配置文件，帮助您快速上手并使用该框架。

1. 项目目录结构及介绍

vite-electron-quick/
├── public/                       # 静态资源文件夹，Electron 中可直接访问
│   └── index.html               # 主窗体的HTML入口文件
├── src/                          # 源代码文件夹
│   ├── main.js                   # Electron主进程脚本
│   └── renderer                 # 渲染进程相关源码文件夹
│       └── index.vue            # Vue应用的入口页面
├── package.json                  # 主npm包配置文件，定义了项目依赖及脚本命令
├── vite.config.js                # Vite构建配置文件
└── electron-builder.yml         # Electron打包配置文件

• public: 存放静态资源，如HTML文件，它作为Electron应用的基础。
• src:
  • main.js: Electron主进程的入口文件，负责创建窗口等逻辑。
  • renderer: 包含Vue组件等，用于渲染UI界面。
• package.json: 包含项目元数据，重要的是定义了启动和构建脚本。
• vite.config.js: Vite的配置文件，控制Vite如何编译和优化前端资源。
• electron-builder.yml: 如果要打包成可执行应用，此文件指定构建设置。

2. 项目的启动文件介绍

main.js

这是Electron应用程序的主进程脚本。在该文件中，开发者初始化Electron环境，创建新的浏览器窗口，并可以监听一系列事件来控制应用程序的行为。例如，通过调用new BrowserWindow创建一个新的窗口实例，并指定其大小、位置和加载的URL（通常是index.html）。此外，还可以处理与渲染进程的通信、系统事件等。

const { app, BrowserWindow } = require('electron')

function createWindow () {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

3. 项目的配置文件介绍

vite.config.js

Vite的配置文件决定了你的开发服务器如何运行，以及如何编译项目中的资产。它可以帮助定制诸如别名路径、热更新、优化配置等。

export default defineConfig({
    base: './',
    plugins: [vue()],
    server: {
        port: 5173, // 可以自定义端口
    },
    build: {
        target: 'esnext', // 确保兼容性
        outDir: 'dist', // 构建产物存放目录
    },
})

electron-builder.yml

用于配置Electron应用的构建和打包过程。包括目标平台、图标、自定义文件夹结构等。这一步是在准备发布你的应用时极为重要的。

appId: com.example.yourapp      # 应用ID
productName: YourAppName        # 打包后的应用名称
asar: true                      # 是否使用asar打包
files:                           # 要包含的文件或文件夹
  - build/**/*                   # 构建产物
  - node_modules/**/*
...

以上就是对MangoTsing/vite-electron-quick项目的关键部分简介，希望对您的学习和使用提供帮助。

vite-electron-quick⚡️Starter template with Vite2 Vue3 and Electron 11.x /使用 Vite2 Vue3 以及 Electron 11.x 打造的快速启动模版。项目地址:https://gitcode.com/gh_mirrors/vi/vite-electron-quick