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

1.创建项目并安装基础依赖最快捷的方式是使用quick-start/electron官方脚手架它能直接生成配置好的项目结构# 使用脚手架创建项目 pnpm create quick-start/electron electron_template --template vue-ts创建过程中命令行会交互式地询问一些配置例如是否添加自动更新插件、启用下载镜像代理 等根据你的需求选择Yes或No即可。完成后进入项目目录并安装依赖cd electron_template pnpm install2.项目结构与核心配置通过脚手架创建的项目具有清晰的结构特别适合 Electron 开发electron_template/ ├── src/ │ ├── main/ # Electron 主进程代码 │ ├── preload/ # 预加载脚本 │ └── renderer/ # 渲染进程这里就是你的 Vue 应用 │ └── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.ts ├── electron.vite.config.ts # 项目配置文件 └── package.json3.安装ui组件库与插件在项目根目录下安装 Element Plus 以及支持自动导入的插件pnpm add element-plus pnpm add -D unplugin-vue-components unplugin-auto-import types/node4.配置Electron和Vite修改electron.vite.config.ts文件集成 Vue、Element Plus 自动导入和 Electron// 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 的样式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 组件无需手动导入这得益于自动导入插件的配置script setup langts 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 altlogo classlogo src./assets/electron.svg / div classcreatorPowered by electron-vite/div div classtext Build an Electron app with span classvueVue/span and span classtsTypeScript/span /div p classtipPlease try pressing codeF12/code to open the devTool/p div classactions div classaction a hrefhttps://electron-vite.org/ target_blank relnoreferrerDocumentation/a /div div classaction a target_blank relnoreferrer clickipcHandleSend IPC/a /div !-- 使用ElementPlus按钮 -- el-button typeprimary clickhandleClick这是一个ElementPlus按钮/el-button /div Versions / /template6.配置 package.json 脚本确保package.json中的脚本和入口点配置正确。electron-vite脚手架已预设好这些。{ 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 应用窗口并支持热更新pnpm dev运行pnpm build:win或针对其他平台的相应命令来打包生成可分发的安装文件pnpm build:win点击安装即可。注意打包配置文件在这里仅在 mac、linux上支持构建 mac、linux 详情若使用 vue-router在打包后避免白屏问题推荐使用 hash 模式若安装 Electron 二进制文件缓慢可设置镜像源加速pnpm config set electron_mirror https://npmmirror.com/mirrors/electron/Vue 组件渲染进程与 Electron主进程通信需通过预加载脚本安全地进行使用ipcMain和ipcRenderer进行通信。