Electron + Vite + Vue3 文件管理工具开发实战

🎯 项目实战概览

Explorer Pro - 功能完善的跨平台文件管理器

包含文件浏览、搜索、预览、标签管理、云同步等核心功能

第一部分：项目初始化与环境搭建

1.1 技术栈选型与架构设计

本教程将构建一个现代化的文件管理工具，具备以下技术特点：

⚡ Vite 构建优势

极速的热重载、高效的构建性能、优化的开发体验，支持原生 ES 模块

⚛️ Vue3 组合式 API

更灵活的组件逻辑复用、更清晰的代码组织、性能提升 30%

🖥️ Electron 原生体验

真正的桌面应用体验、系统级 API 访问、原生窗口管理

1.2 项目架构设计

我们将采用 Electron 推荐的“主进程 + 渲染进程”模式，结合 Vite 的高效构建能力和 Vue3 的响应式框架，实现高性能的桌面应用。整体架构如下所示：

graph TD A[Electron Main Process] --> B(Window 1: Renderer Process - Vue/Vite) A --> C(Window 2: Renderer Process - Vue/Vite) A -- IPC --> B A -- IPC --> C B -- IPC --> A C -- IPC --> A A -- Node.js APIs --> D(File System) A -- Node.js APIs --> E(OS Utilities) B -- Preload Script --> A C -- Preload Script --> A A -- Electron APIs --> F(Menu/Tray/Dialogs) subgraph Renderer Process Vue3/Vite G[Vue Components] --> H(Pinia Store) H --> I(Vue Router) G --> J(HTTP Client: Axios) end B -- Renders --> G C -- Renders --> G

架构说明：

explorer-pro/
├── src/
│   ├── main/                 # Electron 主进程代码
│   │   ├── index.js         # 主进程入口文件，负责窗口创建和应用生命周期
│   │   ├── preload.js       # 预加载脚本，安全地将IPC暴露给渲染进程
│   │   ├── ipc/             # IPC 事件处理器
│   │   │   └── handlers.js # 处理渲染进程的请求，调用Node.js API
│   │   └── system/          # 主进程系统级工具，如菜单、通知
│   ├── renderer/            # Vue3 渲染进程代码
│   │   ├── index.html       # 渲染进程的入口HTML
│   │   ├── main.js          # Vue 应用入口
│   │   ├── App.vue          # 根组件
│   │   ├── components/      # 可复用Vue组件，如 FileBrowser, FilePreview
│   │   ├── views/           # 页面级Vue组件，如 Home, Settings
│   │   ├── stores/          # Pinia 状态管理模块
│   │   ├── router/          # Vue Router 配置
│   │   └── utils/           # 渲染进程工具函数
│   └── shared/              # 主进程和渲染进程共享代码
│       ├── services/        # 业务逻辑服务，如 FileService, SearchService
│       ├── utils/           # 通用工具函数，如 platformAdapter, helpers
│       └── types/           # TypeScript 类型定义
├── public/                  # 静态资源，如图标、图片
├── dist/                    # 构建输出目录
├── package.json             # 项目配置及依赖
├── vite.config.js           # Vite 渲染进程构建配置
├── vite.main.config.js      # Vite 主进程构建配置
└── electron-builder.json    # Electron Builder 打包配置

1.4 环境搭建与项目创建

首先，请确保您的开发环境满足以下要求，并安装必要的工具：

                ⚠️ 环境要求
                Node.js >= 16.0.0 (推荐 LTS 版本)
npm >= 8.0.0 或 yarn >= 1.22.0 (推荐 pnpm)
Git 版本控制工具
VS Code 或其他现代代码编辑器

            

您可以通过以下命令检查 Node.js 和 npm 的版本：

# 检查 Node.js 版本
node -v

# 检查 npm 版本
npm -v

# (可选) 如果没有安装pnpm，建议安装：
npm install -g pnpm

接下来，我们将初始化项目并安装核心依赖：

# 1. 创建项目目录并进入
mkdir explorer-pro
cd explorer-pro

# 2. 初始化 npm 项目
pnpm init

# 3. 创建基础目录结构 (可根据 1.3 节的目录结构手动创建或使用脚本)
mkdir -p src/main src/renderer/{components,views,stores,router,utils,assets} src/shared/{services,utils,types} public

# 4. 安装核心依赖
pnpm add electron vue@next vue-router pinia # 生产依赖
pnpm add -D vite @vitejs/plugin-vue electron-builder concurrently typescript @types/node # 开发依赖

# 5. 安装一些推荐的辅助库（根据实际需求）
pnpm add axios localforage # 用于HTTP请求和本地存储

1.5 `package.json` 配置

配置 package.json 文件，定义项目脚本和依赖：

{
  "name": "explorer-pro",
  "version": "1.0.0",
  "description": "A modern file manager built with Electron + Vite + Vue3",
  "main": "dist/main/index.js",
  "private": true,
  "scripts": {
    "dev": "concurrently \"pnpm run dev:renderer\" \"pnpm run dev:electron\"",
    "dev:renderer": "vite",
    "dev:electron": "wait-on http://localhost:5173 && electron .",
    "build": "pnpm run build:renderer && pnpm run build:main",
    "build:renderer": "vite build",
    "build:main": "vite build -c vite.main.config.js",
    "preview": "vite preview",
    "package": "pnpm run build && electron-builder",
    "dist": "pnpm run build && electron-builder --publish=never",
    "dist:win": "pnpm run build && electron-builder --win --publish=never",
    "dist:mac": "pnpm run build && electron-builder --mac --publish=never"
  },
  "devDependencies": {
    "electron": "^29.0.0",
    "electron-builder": "^24.9.1",
    "vite": "^5.1.4",
    "concurrently": "^8.2.2",
    "wait-on": "^7.2.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0",
    "pinia": "^2.1.7",
    "typescript": "^5.2.2",
    "@types/node": "^20.11.20"
  },
  "dependencies": {
    "axios": "^1.6.7",
    "localforage": "^1.10.0"
  },
  "keywords": [
    "Electron",
    "Vite",
    "Vue3",
    "File Manager",
    "Desktop App"
  ]
}

                💡 脚本说明
                dev:renderer: 启动 Vite 开发服务器，用于渲染进程的热重载。
dev:electron: 等待 Vite 服务器启动后，启动 Electron 应用。
build:renderer: 构建渲染进程的生产代码。
build:main: 构建主进程的生产代码 (使用单独的 Vite 配置)。
package: 构建完整的 Electron 安装包。

            

第二部分：项目基础架构搭建

2.1 Vite 配置 (`vite.config.js`)

渲染进程的 Vite 配置相对简单，主要用于 Vue3 应用的打包。注意这里的 base 配置，对于 Electron 应用，通常使用相对路径。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';

export default defineConfig({
  plugins: [vue()],
  base: './', // 确保在 Electron 中资源路径正确
  build: {
    outDir: 'dist/renderer', // 输出到 dist/renderer 目录
    emptyOutDir: true,
    // 配置 Rollup 选项
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/renderer/index.html'),
      }
    }
  },
  server: {
    port: 5173, // Vite 默认端口
    strictPort: true, // 确保端口不被占用
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src/renderer') // 别名配置
    }
  }
});

2.2 Vite 主进程配置 (`vite.main.config.js`)

主进程也使用 Vite 进行打包，但需要将其配置为 Node.js 环境，并排除 Electron 和 Node.js 内置模块。

// vite.main.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    outDir: 'dist/main', // 输出到 dist/main 目录
    emptyOutDir: true,
    lib: {
      entry: resolve(__dirname, 'src/main/index.js'),
      formats: ['cjs'], // 主进程使用 CommonJS 格式
      fileName: 'index'
    },
    rollupOptions: {
      // 外部化 Electron 和 Node.js 内置模块
      external: [
        'electron',
        ...require('node:module').builtinModules,
        'path',
        'fs',
        'os',
        'child_process' // 明确排除
      ]
    }
  }
});

2.3 Vue3 渲染进程入口 (`src/renderer/main.js`)

Vue3 应用的启动文件：

// src/renderer/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router';
import App from './App.vue';

// 引入全局样式
import './assets/styles/index.css'; 

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.mount('#app');

// 渲染进程中的 Electron API 调用示例
// window.electronAPI.invoke('system:getInfo').then(info => {
//   console.log('Renderer received system info:', info);
// });

index.html 仍然是 Vue 应用的入口，无需过多修改，只需引入 main.js：

<!-- src/renderer/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Explorer Pro</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/renderer/main.js"></script>
</body>
</html>

2.4 Electron 主进程搭建 (`src/main/index.js`)

Electron 主进程文件，负责窗口管理、IPC 设置和应用生命周期。

// src/main/index.js
const { app, BrowserWindow, ipcMain, Menu, shell, globalShortcut, dialog } = require('electron');
const path = require('path');
const url = require('url');

const isDev = process.env.NODE_ENV === 'development';

class ExplorerPro {
  constructor() {
    this.mainWindow = null;
    this.init();
  }

  init() {
    // 确保应用程序在单实例模式下运行
    const gotTheLock = app.requestSingleInstanceLock();
    if (!gotTheLock) {
      app.quit();
      return;
    }

    app.on('second-instance', (event, commandLine, workingDirectory) => {
      // 当运行第二个实例时，聚焦到主窗口
      if (this.mainWindow) {
        if (this.mainWindow.isMinimized()) this.mainWindow.restore();
        this.mainWindow.focus();
      }
    });

    // 应用准备就绪时创建窗口
    app.whenReady().then(() => {
      this.createWindow();
      this.setupIpcHandlers();
      this.setupMenu();
      this.setupGlobalShortcuts();

      // macOS 特有的应用激活处理
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          this.createWindow();
        }
      });
    });

    // 所有窗口关闭时退出应用 (macOS 除外)
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });

    // 应用程序退出前注销所有快捷方式
    app.on('will-quit', () => {
      globalShortcut.unregisterAll();
    });

    // macOS: 处理文件关联打开
    app.on('open-file', (event, filePath) => {
      event.preventDefault();
      if (this.mainWindow) {
        this.mainWindow.webContents.send('file:open-external', filePath);
      }
    });
  }

  createWindow() {
    this.mainWindow = new BrowserWindow({
      width: 1200,
      height: 800,
      minWidth: 800,
      minHeight: 600,
      title: "Explorer Pro",
      icon: path.join(__dirname, '../../public/icon.png'), // 应用图标
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: false, // 禁用 Node.js
        contextIsolation: true, // 启用上下文隔离
        enableRemoteModule: false, // 禁用 remote 模块
        sandbox: true // 启用沙箱
      },
      show: false, // 初始不显示窗口，等待内容加载
      titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default', // macOS 风格标题栏
      backgroundColor: '#ffffff' // 初始背景色
    });

    // 加载渲染进程的 URL 或文件
    if (isDev) {
      this.mainWindow.loadURL('http://localhost:5173');
      this.mainWindow.webContents.openDevTools();
    } else {
      // 生产环境加载打包后的 HTML 文件
      this.mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
    }

    // 窗口内容加载完成后显示
    this.mainWindow.once('ready-to-show', () => {
      this.mainWindow.show();
    });

    // 处理外部链接，使用系统浏览器打开
    this.mainWindow.webContents.setWindowOpenHandler(({ url }) => {
      shell.openExternal(url);
      return { action: 'deny' };
    });
  }

  setupIpcHandlers() {
    const fileService = require(path.join(__dirname, '../shared/services/fileService'));
    const searchService = require(path.join(__dirname, '../shared/services/searchService'));

    ipcMain.handle('file:readDir', async (event, dirPath) => {
      try {
        const result = await fileService.getDirectoryContents(dirPath);
        return { success: true, data: result };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('file:readFile', async (event, filePath, encoding = 'utf8') => {
      try {
        const result = await fileService.readFile(filePath, encoding);
        return { success: true, data: result.content };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('file:writeFile', async (event, filePath, content, encoding = 'utf8') => {
      try {
        await fileService.createFile(filePath, content, encoding);
        return { success: true };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('file:deleteItem', async (event, itemPath) => {
      try {
        await fileService.deleteItem(itemPath);
        return { success: true };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('file:renameItem', async (event, oldPath, newName) => {
      try {
        const newPath = await fileService.renameItem(oldPath, newName);
        return { success: true, data: newPath };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('file:createDirectory', async (event, parentPath, dirName) => {
      try {
        const newPath = await fileService.createDirectory(parentPath, dirName);
        return { success: true, data: newPath };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('search:files', async (event, rootPath, query, options) => {
      try {
        const results = await searchService.searchFiles(rootPath, query, options);
        return { success: true, data: results };
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('system:getHomeDir', () => {
      return require('os').homedir();
    });

    ipcMain.handle('system:getPlatform', () => {
      return process.platform;
    });

    ipcMain.handle('dialog:showOpenDialog', async (event, options) => {
      const result = await dialog.showOpenDialog(this.mainWindow, options);
      return result;
    });

    ipcMain.handle('shell:openPath', async (event, filePath) => {
      try {
        const result = await shell.openPath(filePath);
        return { success: !result, error: result }; // shell.openPath 返回空字符串表示成功
      } catch (error) {
        return { success: false, error: error.message };
      }
    });

    ipcMain.handle('notification:show', (event, title, body) => {
      const { Notification } = require('electron');
      if (Notification.isSupported()) {
        new Notification({ title, body }).show();
      }
    });
  }

  setupMenu() {
    const isMac = process.platform === 'darwin';
    const template = [
      ...(isMac ? [{
        label: app.name,
        submenu: [
          { role: 'about' },
          { type: 'separator' },
          { label: 'Preferences...', accelerator: 'CommandOrControl+,', click: () => this.mainWindow.webContents.send('app:open-settings') },
          { type: 'separator' },
          { role: 'services' },
          { type: 'separator' },
          { role: 'hide' },
          { role: 'hideothers' },
          { role: 'unhide' },
          { type: 'separator' },
          { role: 'quit' }
        ]
      }] : []),
      {
        label: 'File',
        submenu: [
          { label: 'New Folder', accelerator: 'CommandOrControl+Shift+N', click: () => this.mainWindow.webContents.send('app:new-folder') },
          { type: 'separator' },
          isMac ? { role: 'close' } : { role: 'quit' }
        ]
      },
      {
        label: 'Edit',
        submenu: [
          { role: 'undo' },
          { role: 'redo' },
          { type: 'separator' },
          { role: 'cut' },
          { role: 'copy' },
          { role: 'paste' },
          { role: 'delete' },
          { type: 'separator' },
          { role: 'selectAll' }
        ]
      },
      {
        label: 'View',
        submenu: [
          { role: 'reload' },
          { role: 'forceReload' },
          { role: 'toggleDevTools' },
          { type: 'separator' },
          { role: 'resetZoom' },
          { role: 'zoomIn' },
          { role: 'zoomOut' },
          { type: 'separator' },
          { role: 'togglefullscreen' }
        ]
      },
      {
        label: 'Help',
        submenu: [
          {
            label: 'Learn More',
            click: async () => {
              const { shell } = require('electron');
              await shell.openExternal('https://www.electronjs.org');
            }
          }
        ]
      }
    ];

    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
  }

  setupGlobalShortcuts() {
    globalShortcut.register('CommandOrControl+Shift+I', () => {
      if (this.mainWindow && this.mainWindow.isFocused()) {
        this.mainWindow.webContents.toggleDevTools();
      }
    });

    globalShortcut.register('CommandOrControl+R', () => {
      if (this.mainWindow && this.mainWindow.isFocused()) {
        this.mainWindow.reload();
      }
    });
  }
}

// 启动应用
new ExplorerPro();

🔒 安全配置要点

Electron 应用的安全性至关重要，特别是渲染进程：

nodeIntegration: false - 在渲染进程中禁用 Node.js API，防止恶意代码执行。
contextIsolation: true - 启用上下文隔离，阻止渲染进程的代码直接访问 Electron/Node.js 全局对象。
enableRemoteModule: false - 禁用 remote 模块，避免渲染进程直接调用主进程 API。
preload 脚本 - 唯一安全地将主进程功能暴露给渲染进程的方式。
sandbox: true - 启用 Chromium 的沙箱机制，提供额外的安全层。

这些配置共同构成了 Electron 应用的基础安全防线。

2.5 预加载脚本 (`src/main/preload.js`)

预加载脚本是连接主进程和渲染进程的桥梁，它运行在隔离的上下文中，安全地暴露主进程 IPC 方法给渲染进程。

// src/main/preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 渲染进程向主进程发送请求并等待响应 (invoke)
  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args),

  // 渲染进程接收主进程发送的通知 (on)
  on: (channel, callback) => {
    const subscription = (event, ...args) => callback(...args);
    ipcRenderer.on(channel, subscription);
    return () => ipcRenderer.removeListener(channel, subscription);
  },

  // (可选) 渲染进程向主进程发送单向消息 (send)
  send: (channel, ...args) => ipcRenderer.send(channel, ...args)
});

📢 IPC 通信模型

我们主要使用 ipcRenderer.invoke 和 ipcMain.handle 进行双向通信，这是 Electron 推荐的安全通信方式。

sequenceDiagram participant R as Renderer Process (Vue) participant P as Preload Script participant M as Main Process R->>P: window.electronAPI.invoke('channel', data) P->>M: ipcRenderer.invoke('channel', data) M-->>P: ipcMain.handle('channel', (event, data) => result) P-->>R: Promise.resolve(result) M->>P: mainWindow.webContents.send('event:name', data) P->>R: ipcRenderer.on('event:name', (event, data) => callback(data))

第三部分：文件管理核心功能开发

3.1 文件系统服务 (`src/shared/services/fileService.js`)

封装 Node.js 的 fs/promises 模块，提供异步文件操作接口。

// src/shared/services/fileService.js
const { readdir, stat, readFile, writeFile, mkdir, rm, rename } = require('fs/promises');
const { join, basename, extname, dirname } = require('path');
const { homedir } = require('os');

class FileService {
  constructor() {
    this.homeDirectory = homedir();
  }

  /**
   * 获取指定目录的内容 (文件和文件夹)
   * @param {string} directoryPath - 要读取的目录路径
   * @returns {Promise>} - 包含文件/文件夹信息的数组
   */
  async getDirectoryContents(directoryPath) {
    try {
      const items = await readdir(directoryPath);
      const contents = [];

      for (const item of items) {
        const itemPath = join(directoryPath, item);
        try {
          const stats = await stat(itemPath);
          contents.push({
            name: item,
            path: itemPath,
            type: stats.isDirectory() ? 'directory' : 'file',
            size: stats.size,
            modified: stats.mtimeMs, // 修改时间戳
            created: stats.birthtimeMs, // 创建时间戳
            extension: stats.isFile() ? extname(item).toLowerCase() : '',
            isHidden: item.startsWith('.') && process.platform !== 'win32' // Unix-like系统隐藏文件
          });
        } catch (innerError) {
          // 忽略无法访问的文件/目录，继续处理其他项
          console.warn(`无法获取 ${itemPath} 的信息: ${innerError.message}`);
        }
      }

      // 排序: 目录优先，然后按名称排序
      return contents.sort((a, b) => {
        if (a.type !== b.type) {
          return a.type === 'directory' ? -1 : 1;
        }
        return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
      });
    } catch (error) {
      console.error(`读取目录 ${directoryPath} 失败:`, error);
      throw new Error(`无法读取目录: ${error.message}`);
    }
  }

  /**
   * 读取文件内容
   * @param {string} filePath - 文件路径
   * @param {string} encoding - 编码格式，默认为 utf8
   * @returns {Promise

Electron + Vite + Vue3 文件管理工具开发实战

📋 目录导航

🎯 项目实战概览

第一部分：项目初始化与环境搭建

1.1 技术栈选型与架构设计

⚡ Vite 构建优势

⚛️ Vue3 组合式 API

🖥️ Electron 原生体验

1.2 项目架构设计

1.4 环境搭建与项目创建

⚠️ 环境要求

1.5 package.json 配置

💡 脚本说明

第二部分：项目基础架构搭建

2.1 Vite 配置 (vite.config.js)

2.2 Vite 主进程配置 (vite.main.config.js)

2.3 Vue3 渲染进程入口 (src/renderer/main.js)

2.4 Electron 主进程搭建 (src/main/index.js)

🔒 安全配置要点

2.5 预加载脚本 (src/main/preload.js)

📢 IPC 通信模型

第三部分：文件管理核心功能开发

3.1 文件系统服务 (src/shared/services/fileService.js)

3.2 渲染进程状态管理 (src/renderer/stores/fileStore.js)

3.3 文件浏览器组件 (src/renderer/components/FileBrowser.vue)

💡 组件设计要点

第四部分：进阶功能实现

4.1 文件搜索功能 (src/shared/services/searchService.js)

4.2 文件预览组件 (src/renderer/components/FilePreview.vue)

$1

$1

$1

第五部分：系统集成与优化

5.1 渲染进程与主进程的通信 (IPC)

5.2 性能优化

⚡ 性能优化策略

第六部分：跨平台适配

6.1 平台检测与适配

6.2 macOS 特定功能集成

6.3 Windows 特定功能集成

第七部分：完整项目实战 - "Explorer Pro"

7.1 项目规划与设计

🎯 项目目标

7.2 主体应用组件 (src/renderer/App.vue)

7.3 路由配置 (src/renderer/router/index.js)

7.4 辅助工具函数 (src/renderer/utils/helpers.js)

第八部分：构建与发布

8.1 electron-builder.json 打包配置

📦 构建配置要点

8.2 构建与发布流程

🚀 持续集成/部署 (CI/CD) 建议

🎉 总结与进阶学习

✨ 项目成果

🚀 进阶功能建议

📚 推荐资源

🎯 下一步行动

1.5 `package.json` 配置

2.1 Vite 配置 (`vite.config.js`)

2.2 Vite 主进程配置 (`vite.main.config.js`)

2.3 Vue3 渲染进程入口 (`src/renderer/main.js`)

2.4 Electron 主进程搭建 (`src/main/index.js`)

2.5 预加载脚本 (`src/main/preload.js`)

3.1 文件系统服务 (`src/shared/services/fileService.js`)

3.2 渲染进程状态管理 (`src/renderer/stores/fileStore.js`)

3.3 文件浏览器组件 (`src/renderer/components/FileBrowser.vue`)

4.1 文件搜索功能 (`src/shared/services/searchService.js`)

4.2 文件预览组件 (`src/renderer/components/FilePreview.vue`)

7.2 主体应用组件 (`src/renderer/App.vue`)

7.3 路由配置 (`src/renderer/router/index.js`)

7.4 辅助工具函数 (`src/renderer/utils/helpers.js`)

8.1 `electron-builder.json` 打包配置

目录导航

Electron + Vite + Vue3 文件管理工具开发实战

预览结果：