初始化项目
mkdir electron-vue3
cd electron-vue3
pnpm init
安装Vite + Vue3 + Element Plus
pnpm add vue@latest
pnpm add -D vite @vitejs/plugin-vue
pnpm add element-plus
pnpm add @element-plus/icons-vue
安装Electron
pnpm add -D electron electron-builder
pnpm add -D vite-plugin-electron vite-plugin-electron-renderer
创建静态文件入口：index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>electron-vue3</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
创建样式文件：src/assets/style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
创建Vue根组件：src/App.vue
<template>
<h1>Vue3 + Element Plus</h1>
<el-button type="primary">测试按钮</el-button>
</template>
创建入口文件：src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/style.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
创建Electron主进程文件：electron/main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({
width: 1000,
height: 700,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
win.webContents.openDevTools()
} else {
win.loadFile(path.join(__dirname, '../dist/index.html'))
}
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
创建Electron渲染进程的预加载脚本文件：electron/preload.js
console.log('preload 已加载')
Vite核心配置文件：vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'
export default defineConfig({
plugins: [
vue(),
electron([
{
entry: "electron/main.js"
},
{
entry: "electron/preload.js"
}
]),
renderer()
],
server: {
port: 3000
}
})
创建.npmrc（npm/pnpm/yarn的配置文件）
# Electron国内镜像
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
# PNPM专用配置
node_mirror=https://npmmirror.com/mirrors/node/
registry=https://registry.npmmirror.com/
修改Node.js核心配置文件：package.json
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"start": "electron .",
"electron:dev": "vite",
"electron:build": "vite build && electron-builder"
},
运行项目
pnpm electron:dev
打包项目
pnpm electron:build
