xiaoshuai/electron-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

del

Browse Source
This commit is contained in:
Timeless小帅
2026-05-21 00:35:43 +08:00
parent 2e8ee357d5
commit 9b60807cca
5 changed files with 14 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14
View File
@@ -126,6 +126,20 @@ ipcMain.handle('get-data', () => {
└─────────────────────────────────────────────────────────┘ └─────────────────────────────────────────────────────────┘
``` ```
```
┌─────────────┬─────────────────────────────────────────┐
│ 旧文件 │ → 新文件 │
├─────────────┼─────────────────────────────────────────┤
│ main.js │ src/main/index.ts │
├─────────────┼─────────────────────────────────────────┤
│ preload.js │ src/preload/index.ts │
├─────────────┼─────────────────────────────────────────┤
│ index.html │ src/renderer/index.html │
├─────────────┼─────────────────────────────────────────┤
│ renderer.js │ src/renderer/src/components/Counter.vue │
└─────────────┴─────────────────────────────────────────┘
```
electron-vite 自动处理： electron-vite 自动处理：
- 主进程和预加载脚本的 CommonJS/ESM 兼容 - 主进程和预加载脚本的 CommonJS/ESM 兼容
- 渲染进程的热模块替换 (HMR) - 渲染进程的热模块替换 (HMR)
index.html
-75
View File
@@ -1,75 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时计数器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.container {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 28px;
margin-bottom: 30px;
color: #00d9ff;
}
.counter-display {
font-size: 72px;
font-weight: bold;
color: #00ff88;
text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
margin: 20px 0;
font-variant-numeric: tabular-nums;
}
.info {
margin-top: 30px;
font-size: 14px;
color: #888;
}
.status {
display: inline-block;
padding: 5px 15px;
background: #00ff88;
color: #1a1a2e;
border-radius: 20px;
font-weight: bold;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h1>实时计数器</h1>
<div class="counter-display" id="counter">0</div>
<div class="info">
<span class="status">运行中</span>
</div>
</div>
<script src="renderer.js"></script>
</body>
</html>
main.js
-34
View File
@@ -1,34 +0,0 @@
const { app, BrowserWindow } = require('electron');
const path = require('path');
let win;
function createWindow() {
win = new BrowserWindow({
width: 500,
height: 400,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
// 打开开发者工具方便调试
// win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
preload.js
-7
View File
@@ -1,7 +0,0 @@
const { contextBridge, ipcRenderer } = require('electron');
// 暴露安全的 API 给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
// 可扩展更多功能
platform: process.platform
});
renderer.js
-16
View File
@@ -1,16 +0,0 @@
// 死循环计数器，每秒增加并刷新 UI
let count = 0;
const counterElement = document.getElementById('counter');
function updateCounter() {
count++;
counterElement.textContent = count.toLocaleString();
// 立即安排下一次更新
setTimeout(updateCounter, 1000);
}
// 启动计数器
updateCounter();
console.log('计数器已启动');