Vue3 + TS + Vite2 + Electron16 项目开发全梳理

2023-09-19 01:30:17

使用 Vue3、TypeScript、Vite2 和 Electron 构建跨平台桌面应用程序

桌面应用程序的开发是一个复杂的过程，通常需要专门的开发人员和对特定平台的深入了解。然而，随着 Electron 框架的出现，使用 Web 技术构建跨平台桌面应用程序变得更加容易。本文将指导您逐步使用 Vue3、TypeScript、Vite2 和 Electron 16 构建跨平台桌面应用程序。

Electron 概述

Electron 是一个基于 Chromium 的开源框架，可让您使用 Web 技术（如 HTML、CSS 和 JavaScript）构建桌面应用程序。这些应用程序可以在 Windows、macOS 和 Linux 上无缝运行，无需针对每个平台单独开发。Electron 简化了桌面应用程序的开发，使开发人员能够利用其现有 Web 技能集。

何时使用 Electron

Electron 特别适用于以下情况：

需要跨平台兼容性，无需单独开发不同平台的版本。
团队缺乏专用的桌面应用程序开发人员。
需要快速开发复杂的桌面应用程序，需要与操作系统交互。

安装 Electron

要开始使用 Electron，您需要在计算机上安装 Node.js。然后，使用以下命令安装 Electron：

npm install electron --save-dev

创建新项目

使用 create-electron-app CLI 创建一个新的 Electron 项目：

npx create-electron-app my-electron-app

这将创建一个包含所有必要文件的新项目目录。

安装 Vue3、TypeScript 和 Vite2

我们将使用 Vue3 作为框架、TypeScript 作为类型化语言和 Vite2 作为构建工具。安装这些依赖项：

npm install vue@3 --save
npm install typescript --save-dev
npm install vite@2 --save-dev

项目配置

在根目录下创建以下文件进行配置：

tsconfig.json ：配置 TypeScript 编译器。
.env ：存储环境变量。
vite.config.ts ：配置 Vite 构建工具。

编写代码

App.vue ：包含应用程序的 Vue 组件。

<template>
  <div id="app">
    <h1>Hello, Electron!</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
})
</script>

main.ts ：Electron 应用程序的主入口点。

import { app, BrowserWindow, ipcMain } from 'electron'
import { createApp } from './App'

let mainWindow: BrowserWindow | null = null

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

  mainWindow.loadURL('http://localhost:3000/')

  ipcMain.on('message-from-renderer', (event, arg) => {
    console.log(arg)
  })
})

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
      }
    })

    mainWindow.loadURL('http://localhost:3000/')
  }
})