用vue3+ts+elementPlus+vite搭建electron桌面端应用

1.创建项目并安装基础依赖

最快捷的方式是使用 @quick-start/electron官方脚手架，它能直接生成配置好的项目结构：

bash 复制代码

# 使用脚手架创建项目
pnpm create @quick-start/electron electron_template --template vue-ts

创建过程中，命令行会交互式地询问一些配置，例如是否添加自动更新插件、启用下载镜像代理等，根据你的需求选择 Yes或 No即可。

完成后，进入项目目录并安装依赖：

bash 复制代码

cd electron_template
pnpm install

2.项目结构与核心配置

通过脚手架创建的项目具有清晰的结构，特别适合 Electron 开发：

javascript 复制代码

electron_template/
├── src/
│   ├── main/           # Electron 主进程代码
│   ├── preload/        # 预加载脚本
│   └── renderer/       # 渲染进程，这里就是你的 Vue 应用
│       └── src/
│           ├── assets/
│           ├── components/
│           ├── App.vue
│           └── main.ts
├── electron.vite.config.ts  # 项目配置文件
└── package.json

3.安装ui组件库与插件

在项目根目录下，安装 Element Plus 以及支持自动导入的插件：

bash 复制代码

pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import @types/node

4.配置Electron和Vite

修改 electron.vite.config.ts文件，集成 Vue、Element Plus 自动导入和 Electron：

TypeScript 复制代码

// electron.vite.config.ts
import { resolve } from 'path'
import { defineConfig } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
// 引入自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  main: {}, // 主进程配置
  preload: {}, // 预加载脚本配置
  renderer: {
    // 解析渲染进程中的别名
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      vue(),
      // 配置自动导入
      AutoImport({
        resolvers: [ElementPlusResolver()],
        dts: true // 生成类型声明文件
      }),
      Components({
        resolvers: [ElementPlusResolver()],
        dts: true // 生成类型声明文件
      })
    ]
  }
})

5.在 Vue 中引入 Element Plus 并使用

在src/renderer/src/main.ts中引入 Element Plus 的样式：

TypeScript 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'

createApp(App).mount('#app')

在 src/renderer/src/App.vue中直接使用 Element Plus 组件，无需手动导入，这得益于自动导入插件的配置：

html 复制代码

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import Versions from './components/Versions.vue'

const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')

const handleClick = (): void => {
  ElMessage.success('点击了element按钮')
}
</script>

<template>
  <img alt="logo" class="logo" src="./assets/electron.svg" />
  <div class="creator">Powered by electron-vite</div>
  <div class="text">
    Build an Electron app with
    <span class="vue">Vue</span>
    and
    <span class="ts">TypeScript</span>
  </div>
  <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
  <div class="actions">
    <div class="action">
      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
    </div>
    <div class="action">
      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
    </div>
    <!-- 使用ElementPlus按钮 -->
    <el-button type="primary" @click="handleClick">这是一个ElementPlus按钮</el-button>
  </div>
  <Versions />
</template>

6.配置 package.json 脚本

确保 package.json中的脚本和入口点配置正确。electron-vite脚手架已预设好这些。

TypeScript 复制代码

{
  "name": "electron_demo", // 项目名称
  "version": "1.0.0", // 版本号
  "description": "An Electron application with Vue and TypeScript", // 描述
  "main": "./out/main/index.js", // 指向编译后的主进程文件
  "author": "example.com", // 作者
  "scripts": {
    "dev": "electron-vite dev", // 启动开发环境
    "build": "npm run typecheck && electron-vite build", // 构建项目
    "build:unpack": "npm run build && electron-builder --dir", // 构建 unpack 目录
    "build:win": "npm run build && electron-builder --win", // 构建Windows安装包
    "build:mac": "npm run build && electron-builder --mac", // 构建macOS安装包
    "build:linux": "npm run build && electron-builder --linux" // 构建Linux安装包
    // ...
  },
  // ...
}

7.开发与构建

在项目根目录运行。这会启动 Vite 开发服务器和 Electron 应用窗口，并支持热更新：

bash 复制代码

pnpm dev

运行 pnpm build:win（或针对其他平台的相应命令）来打包生成可分发的安装文件：

bash 复制代码

pnpm build:win

点击安装即可。

注意

打包配置文件在这里：

仅在 mac、linux上支持构建 mac、linux 详情
若使用 vue-router，在打包后避免白屏问题，推荐使用 hash 模式
若安装 Electron 二进制文件缓慢，可设置镜像源加速

bash 复制代码

pnpm config set electron_mirror https://npmmirror.com/mirrors/electron/

Vue 组件（渲染进程）与 Electron 主进程通信需通过预加载脚本安全地进行，使用 ipcMain 和 ipcRenderer 进行通信。（下次有空做个示例）