从零构建 Electron + Vue 3 + Vite 3 + TS 桌面客户端开发框架指南

2023-09-18 23:09:53

构建稳健的 Electron + Vue 3 + Vite 3 + TS 桌面客户端开发框架

简介

桌面客户端应用程序在跨平台环境中提供无缝的用户交互体验方面至关重要。Electron，一个将网络技术与原生功能相结合的框架，已经成为构建这些应用程序的首选工具。Vue 3，一个渐进式且响应式的前端框架，与 Electron 无缝集成，为现代化 UI 开发奠定了基础。本文将指导您逐步创建和配置一个强大的 Electron + Vue 3 + Vite 3 + TS 桌面客户端开发框架。

1. 搭建基础

1.1. 初始化项目

使用 npx 创建一个新的 Electron 项目：

npx electron-vue init my-app

1.2. 安装 Vite 3 和 TypeScript

npm install --save-dev @vitejs/plugin-vue @vitejs/plugin-typescript

2. 配置 Vite 3 和 Vue 3

在 vue.config.js 中进行配置：

module.exports = {
  plugins: [
    require('vite-plugin-vue').default(),
    require('vite-plugin-typescript').default()
  ],
  server: {
    host: 'localhost',
    port: 3000
  }
};

3. 集成 Electron

3.1. 安装 Electron 和 Electron Builder

npm install --save-dev electron electron-builder

3.2. 导入 Electron

在 main.js 中导入 Electron：

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

3.3. 创建窗口并嵌入 Vue 应用程序

let win;
function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL('http://localhost:3000');
}

4. 客户端打包

4.1. 安装 Electron Builder

npm install --save-dev electron-builder-bin

4.2. 创建 package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --platform=all"
  }
}