From 18a14111f86640542be1eb8f6d6c4db9dd657686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timeless=E5=B0=8F=E5=B8=85?= <1250076672@qq.com>
Date: Thu, 21 May 2026 00:30:05 +0800
Subject: [PATCH] init vue

---
 .gitignore                              |  1 +
 electron.vite.config.ts                 | 40 +++++++++++++++
 package.json                            | 33 +++++++++---
 src/main/index.ts                       | 68 +++++++++++++++++++++++++
 src/preload/index.d.ts                  | 17 +++++++
 src/preload/index.ts                    | 21 ++++++++
 src/renderer/index.html                 | 29 +++++++++++
 src/renderer/src/App.vue                | 46 +++++++++++++++++
 src/renderer/src/components/Counter.vue | 37 ++++++++++++++
 src/renderer/src/main.ts                |  4 ++
 tsconfig.json                           | 19 +++++++
 tsconfig.node.json                      | 16 ++++++
 tsconfig.web.json                       | 21 ++++++++
 13 files changed, 345 insertions(+), 7 deletions(-)
 create mode 100644 electron.vite.config.ts
 create mode 100644 src/main/index.ts
 create mode 100644 src/preload/index.d.ts
 create mode 100644 src/preload/index.ts
 create mode 100644 src/renderer/index.html
 create mode 100644 src/renderer/src/App.vue
 create mode 100644 src/renderer/src/components/Counter.vue
 create mode 100644 src/renderer/src/main.ts
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 tsconfig.web.json

diff --git a/.gitignore b/.gitignore
index 1421050..55946e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 package-lock.json
 node_modules
 .idea
+out
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
new file mode 100644
index 0000000..328b692
--- /dev/null
+++ b/electron.vite.config.ts
@@ -0,0 +1,40 @@
+import { resolve } from 'path'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/main/index.ts')
+        }
+      }
+    }
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/preload/index.ts')
+        }
+      }
+    }
+  },
+  renderer: {
+    root: 'src/renderer',
+    build: {
+      rollupOptions: {
+        input: resolve(__dirname, 'src/renderer/index.html')
+      }
+    },
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src/renderer/src')
+      }
+    }
+  }
+})
\ No newline at end of file
diff --git a/package.json b/package.json
index ca83c5a..8d47ebf 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,37 @@
 {
-  "name": "electron-counter",
+  "name": "electron-vue-counter",
   "version": "1.0.0",
-  "description": "Electron app with live counter",
-  "main": "main.js",
+  "description": "Electron + Vue3 + TypeScript 计数器应用",
+  "main": "./out/main/index.js",
+  "type": "module",
   "scripts": {
-    "start": "electron ."
+    "dev": "electron-vite dev",
+    "build": "electron-vite build",
+    "preview": "electron-vite preview",
+    "start": "electron .",
+    "package": "electron-vite build && electron-builder"
+  },
+  "dependencies": {
+    "@electron-toolkit/preload": "^3.0.2",
+    "@electron-toolkit/utils": "^4.0.0",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "electron": "^28.3.3"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "electron": "^28.3.3",
+    "electron-builder": "^24.13.3",
+    "electron-vite": "^2.1.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
+    "vue-tsc": "^2.0.7"
   },
   "build": {
-    "appId": "com.example.electron-counter",
+    "appId": "com.example.electron-vue-counter",
     "win": {
       "target": "nsis"
-    }
+    },
+    "files": [
+      "out/**/*"
+    ]
   }
 }
diff --git a/src/main/index.ts b/src/main/index.ts
new file mode 100644
index 0000000..f668293
--- /dev/null
+++ b/src/main/index.ts
@@ -0,0 +1,68 @@
+import { app, BrowserWindow, shell, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+
+let mainWindow: BrowserWindow | null = null
+
+function createWindow(): void {
+  if (mainWindow) return
+
+  mainWindow = new BrowserWindow({
+    width: 500,
+    height: 400,
+    show: false,
+    autoHideMenuBar: false,
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.mjs'),
+      sandbox: false,
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow?.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+app.whenReady().then(() => {
+  electronApp.setAppUserModelId('com.example.electron-vue-counter')
+
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+
+  // IPC 处理程序示例
+  ipcMain.handle('get-platform-info', () => {
+    return {
+      platform: process.platform,
+      arch: process.arch,
+      version: process.versions.electron
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
\ No newline at end of file
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
new file mode 100644
index 0000000..b92875b
--- /dev/null
+++ b/src/preload/index.d.ts
@@ -0,0 +1,17 @@
+import { ElectronAPI } from '@electron-toolkit/preload'
+
+interface Api {
+  platform: string
+  getPlatformInfo: () => Promise<{
+    platform: string
+    arch: string
+    version: string
+  }>
+}
+
+declare global {
+  interface Window {
+    electron: ElectronAPI
+    api: Api
+  }
+}
\ No newline at end of file
diff --git a/src/preload/index.ts b/src/preload/index.ts
new file mode 100644
index 0000000..5b18c0e
--- /dev/null
+++ b/src/preload/index.ts
@@ -0,0 +1,21 @@
+import { contextBridge, ipcRenderer } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+const api = {
+  platform: process.platform,
+  getPlatformInfo: () => ipcRenderer.invoke('get-platform-info')
+}
+
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error('preload error:', error)
+  }
+} else {
+  // @ts-ignore
+  window.electron = electronAPI
+  // @ts-ignore
+  window.api = api
+}
\ No newline at end of file
diff --git a/src/renderer/index.html b/src/renderer/index.html
new file mode 100644
index 0000000..af8c223
--- /dev/null
+++ b/src/renderer/index.html
@@ -0,0 +1,29 @@
+<!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;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
new file mode 100644
index 0000000..4c3ed3b
--- /dev/null
+++ b/src/renderer/src/App.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Counter from './components/Counter.vue'
+</script>
+
+<template>
+  <div class="container">
+    <h1>实时计数器</h1>
+    <Counter />
+    <div class="info">
+      <span class="status">运行中</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.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;
+}
+
+.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>
\ No newline at end of file
diff --git a/src/renderer/src/components/Counter.vue b/src/renderer/src/components/Counter.vue
new file mode 100644
index 0000000..5babbc4
--- /dev/null
+++ b/src/renderer/src/components/Counter.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const count = ref(0)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+function updateCounter(): void {
+  count.value++
+  timer = setTimeout(updateCounter, 1000)
+}
+
+onMounted(() => {
+  updateCounter()
+  console.log('计数器已启动')
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer)
+  }
+})
+</script>
+
+<template>
+  <div class="counter-display">{{ count.toLocaleString() }}</div>
+</template>
+
+<style scoped>
+.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;
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts
new file mode 100644
index 0000000..58cdcf4
--- /dev/null
+++ b/src/renderer/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5fdbd1e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*", "electron.vite/**/*"],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.web.json" }
+  ]
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..d22a1e7
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "outDir": "./out/types"
+  },
+  "include": ["src/main/**/*", "src/preload/**/*", "electron.vite/**/*"]
+}
\ No newline at end of file
diff --git a/tsconfig.web.json b/tsconfig.web.json
new file mode 100644
index 0000000..16ecae5
--- /dev/null
+++ b/tsconfig.web.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "outDir": "./out/types",
+    "paths": {
+      "@renderer/*": ["./src/renderer/src/*"]
+    }
+  },
+  "include": ["src/renderer/**/*"]
+}
\ No newline at end of file