\n| \n main: "electron\/main.js"<\/p>\n<\/td>\n | \n Electron \u5165\u53e3<\/p>\n<\/td>\n | \n \u8fd9\u662f\u6574\u4e2a\u684c\u9762\u5e94\u7528\u7684"\u5927\u8111"\u6240\u5728<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n scripts \u811a\u672c\u2014\u2014\u9879\u76ee\u7684"\u5492\u8bed"：<\/p>\n {
\n "dev": "vite",
\n "build": "vite build",
\n "preview": "vite preview",
\n "electron:dev": "vite –mode electron",
\n "electron:build": "vite build && electron-builder"
\n } <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u5f53\u4f60\u8f93\u5165 npm run electron:dev \u65f6，Vite \u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668，\u540c\u65f6 vite-plugin-electron \u63d2\u4ef6\u4f1a\u542f\u52a8 Electron \u4e3b\u8fdb\u7a0b，\u4e24\u8005\u901a\u8fc7\u73af\u5883\u53d8\u91cf VITE_DEV_SERVER_URL \u5efa\u7acb\u8fde\u63a5\u3002<\/p>\n \u751f\u4ea7\u73af\u5883\u53ea\u9700\u8981 Vue\u2014\u2014\u56e0\u4e3a\u6700\u7ec8\u6253\u5305\u540e，Electron \u52a0\u8f7d\u7684\u662f\u9759\u6001 HTML \u6587\u4ef6，\u4e0d\u9700\u8981 Vite \u6216 Electron \u672c\u8eab\u3002<\/p>\n<\/p>\n \u7b2c\u4e8c：Vite \u7684\u9b54\u6cd5–vite.config.js<\/h3>\n\u00a0 \u00a0 \u00a0Vite \u662f\u8fd9\u4e2a\u9879\u76ee\u7684"\u9b54\u6cd5\u5de5\u574a"\u3002\u914d\u7f6e\u6587\u4ef6\u51b3\u5b9a\u4e86\u4ee3\u7801\u5982\u4f55\u88ab\u7f16\u8bd1\u3001\u5982\u4f55\u88ab Electron \u52a0\u8f7d\u3002\u00a0 \u00a0 <\/p>\n import { defineConfig } from 'vite'
\nimport vue from '@vitejs\/plugin-vue'
\nimport electron from 'vite-plugin-electron'
\nimport renderer from 'vite-plugin-electron-renderer'
\nimport { fileURLToPath } from 'url'<\/p>\n export default defineConfig({
\n plugins: [
\n vue(), \/\/ \u2460 \u8ba9 Vite \u7406\u89e3 .vue \u5355\u6587\u4ef6\u7ec4\u4ef6
\n electron([ \/\/ \u2461 Electron \u4e3b\u8fdb\u7a0b\u63d2\u4ef6
\n {
\n entry: 'electron\/main.js',
\n onstart(options) {
\n options.startup() \/\/ \u4e3b\u8fdb\u7a0b\u53d8\u5316\u65f6\u81ea\u52a8\u91cd\u542f Electron
\n },
\n vite: {
\n build: {
\n sourcemap: true,
\n outDir: 'dist\/electron',
\n },
\n },
\n },
\n ]),
\n renderer(), \/\/ \u2462 \u8ba9\u6e32\u67d3\u8fdb\u7a0b\u4e5f\u80fd\u7528 Node.js API（\u867d\u7136\u672c\u9879\u76ee\u672a\u4f7f\u7528）
\n ],
\n resolve: {
\n alias: {
\n '@': fileURLToPath(new URL('.\/src', import.meta.url))
\n }
\n }
\n})<\/p>\n \u4e09\u628a\u94a5\u5319\u7684\u89e3\u8bfb：<\/p>\n vue() \u2192 \u7f16\u8bd1 .vue \u6587\u4ef6，\u652f\u6301 SFC \u70ed\u66f4\u65b0
\nelectron() \u2192 \u76d1\u542c\u4e3b\u8fdb\u7a0b\u4ee3\u7801，\u53d8\u5316\u65f6\u91cd\u542f Electron
\nrenderer() \u2192 \u4e3a\u6e32\u67d3\u8fdb\u7a0b\u6ce8\u5165 Node.js \u80fd\u529b <\/p>\n \u8def\u5f84\u522b\u540d @\u200b \u8ba9\u4f60\u53ef\u4ee5\u5199 import Timer from '@\/components\/Timer.vue' \u800c\u4e0d\u662f ..\/..\/..\/components\/Timer.vue\u2014\u2014\u5728\u5927\u578b\u9879\u76ee\u4e2d\u8fd9\u662f\u6551\u547d\u7684\u8bbe\u8ba1\u3002<\/p>\n \u7b2c\u4e09：\u6837\u5f0f\u7684\u70bc\u91d1\u672f–Tailwind \u4e09\u5251\u5ba2<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0tailwind.config.js<\/p>\n \/** @type {import('tailwindcss').Config} *\/
\nexport default {
\n content: [
\n ".\/index.html",
\n ".\/src\/**\/*.{vue,js,ts,jsx,tsx}",
\n ],
\n theme: {
\n extend: {},
\n },
\n plugins: [],
\n}<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content \u6570\u7ec4\u544a\u8bc9 Tailwind：\u53bb\u8fd9\u4e9b\u6587\u4ef6\u91cc\u626b\u63cf\u7c7b\u540d，\u6ca1\u7528\u5230\u7684\u5c31\u5220\u6389\u3002\u8fd9\u5c31\u662f Tailwind \u80fd\u505a\u5230"\u751f\u4ea7\u73af\u5883 CSS \u53ea\u6709\u51e0KB"\u7684\u79d8\u5bc6\u2014\u2014Tree Shaking\u3002<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0postcss.config.js<\/p>\n export default {
\n plugins: {
\n tailwindcss: {},
\n autoprefixer: {},
\n },
\n} <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0PostCSS \u662f"CSS \u7684 Babel"\u3002\u5b83\u8ba9 Tailwind \u7684\u6307\u4ee4（@tailwind base;）\u88ab\u7f16\u8bd1\u6210\u771f\u5b9e CSS，\u540c\u65f6 autoprefixer \u81ea\u52a8\u6dfb\u52a0 -webkit-\u3001-moz- \u7b49\u6d4f\u89c8\u5668\u524d\u7f00\u3002<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src\/style.css<\/p>\n @tailwind base;
\n@tailwind components;
\n@tailwind utilities;<\/p>\n body {
\n margin: 0;
\n}<\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u4e09\u884c\u6307\u4ee4，\u5f15\u5165 Tailwind \u7684\u5168\u90e8\u529b\u91cf：<\/p>\n \n- base：\u6d4f\u89c8\u5668\u91cd\u7f6e\u6837\u5f0f（\u7c7b\u4f3c normalize.css）<\/li>\n
- components：\u53ef\u590d\u7528\u7ec4\u4ef6\u6837\u5f0f（\u672c\u9879\u76ee\u672a\u81ea\u5b9a\u4e49）<\/li>\n
- utilities：\u6240\u6709\u539f\u5b50\u7c7b（flex\u3001text-7xl\u3001bg-[#1a1a2e] \u7b49）<\/li>\n<\/ul>\n
\u7b2c\u56db：Vue \u7684\u5165\u53e3–src\/main.js<\/h3>\nimport { createApp } from 'vue'
\nimport '.\/style.css'
\nimport App from '.\/App.vue'<\/p>\n createApp(App).mount('#app') <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u56db\u884c\u4ee3\u7801，\u5b8c\u6210\u4e09\u4ef6\u4e8b：<\/p>\n 1. \u521b\u5efa Vue \u5e94\u7528\u5b9e\u4f8b
\n2. \u5bfc\u5165\u5168\u5c40\u6837\u5f0f（Tailwind \u5728\u6b64\u751f\u6548）
\n3. \u5c06 App \u7ec4\u4ef6\u6302\u8f7d\u5230 index.html \u4e2d id="app" \u7684 DOM \u8282\u70b9 <\/p>\n \u7b2c\u4e94：HTML \u7684\u9aa8\u67b6–index.html<\/h3>\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0">
\n <title>\u756a\u8304\u949f<\/title>
\n<\/head>
\n<body>
\n <div id="app"><\/div>
\n <script type="module" src="\/src\/main.js"><\/script>
\n<\/body>
\n<\/html> <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u8fd9\u662f\u6574\u4e2a\u5e94\u7528\u7684"\u7a7a\u753b\u5e03"\u3002<div id="app"> \u662f Vue \u7684\u6302\u8f7d\u70b9，<script type="module"> \u8ba9\u6d4f\u89c8\u5668\u4ee5 ES Module \u65b9\u5f0f\u52a0\u8f7d\u5165\u53e3\u3002<\/p>\n Electron \u89c6\u89d2：Electron \u7684 BrowserWindow \u6700\u7ec8 loadURL \u6216 loadFile \u52a0\u8f7d\u7684\u5c31\u662f\u8fd9\u4e2a HTML\u3002<\/p>\n \u7b2c\u516d：\u8ba1\u65f6\u5668\u7684\u5fc3\u810f–Timer.vue<\/h3>\n\u00a0 \u00a0\u8fd9\u662f\u6574\u4e2a\u9879\u76ee\u6700\u6838\u5fc3\u7684\u7ec4\u4ef6\u3002\u5b83\u4e0d\u5173\u5fc3 UI \u957f\u4ec0\u4e48\u6837，\u53ea\u5173\u5fc3\u65f6\u95f4\u600e\u4e48\u8d70\u3002<\/p>\n \u6a21\u677f\u5c42<\/p>\n <template>
\n <div class="text-7xl my-8">
\n {{ timeStr }}
\n <\/div>
\n<\/template> <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u53ea\u505a\u4e00\u4ef6\u4e8b：\u663e\u793a\u683c\u5f0f\u5316\u540e\u7684\u65f6\u95f4\u5b57\u7b26\u4e32\u3002<\/p>\n \u903b\u8f91\u5c42–\u72b6\u6001\u673a<\/p>\n const props = defineProps(['initSeconds']) \/\/ \u4ece\u7236\u7ec4\u4ef6\u63a5\u6536\u521d\u59cb\u79d2\u6570
\nconst emit = defineEmits(['finish']) \/\/ \u5411\u7236\u7ec4\u4ef6\u53d1\u5c04"\u5b8c\u6210"\u4e8b\u4ef6<\/p>\n const totalSeconds = ref(props.initSeconds) \/\/ \u5f53\u524d\u5269\u4f59\u79d2\u6570
\nlet timerId = null \/\/ setInterval \u7684\u53e5\u67c4
\nconst isRunning = ref(false) \/\/ \u8fd0\u884c\u72b6\u6001\u9501 <\/p>\n \u6838\u5fc3\u7b97\u6cd5：<\/p>\n const timeStr = computed(() => {
\n const s = totalSeconds.value
\n const m = Math.floor(s \/ 60)
\n const sec = s % 60
\n return String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0')
\n}) <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u8fd9\u662f\u4e00\u4e2a\u8ba1\u7b97\u5c5e\u6027，\u4f9d\u8d56 totalSeconds\u3002\u6bcf\u5f53 totalSeconds \u53d8\u5316，timeStr \u81ea\u52a8\u91cd\u65b0\u8ba1\u7b97\u3002\u8f93\u51fa\u683c\u5f0f：MM:SS\u3002<\/p>\n \u5fc3\u8df3\u51fd\u6570：<\/p>\n function tick() {
\n totalSeconds.value–
\n if (totalSeconds.value <= 0) {
\n clearInterval(timerId)
\n isRunning.value = false
\n emit('finish') \/\/ \u65f6\u95f4\u5230！\u901a\u77e5\u7236\u7ec4\u4ef6
\n }
\n} <\/p>\n \u5bf9\u5916 API（defineExpose）：<\/p>\n defineExpose({
\n start, \/\/ \u5f00\u59cb\u8ba1\u65f6
\n pause, \/\/ \u6682\u505c\u8ba1\u65f6
\n reset \/\/ \u91cd\u7f6e\u8ba1\u65f6
\n}) <\/p>\n \u8bbe\u8ba1\u4eae\u70b9：defineExpose \u8ba9\u7236\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7 ref \u76f4\u63a5\u8c03\u7528\u8fd9\u4e9b\u65b9\u6cd5\u3002\u8fd9\u662f\u4e00\u79cd\u547d\u4ee4\u5f0f API \u8bbe\u8ba1\u2014\u2014\u7236\u7ec4\u4ef6\u8bf4"\u5f00\u59cb"，Timer \u5c31"\u5f00\u59cb"，\u800c\u4e0d\u662f\u901a\u8fc7 props \u9a71\u52a8\u3002<\/p>\n \u9632\u91cd\u590d\u542f\u52a8：<\/p>\n const start = () => {
\n if (isRunning.value) return \/\/ \u5df2\u7ecf\u5728\u8dd1\u4e86？\u5ffd\u7565
\n isRunning.value = true
\n timerId = setInterval(tick, 1000)
\n} <\/p>\n \u54cd\u5e94\u5f0f\u91cd\u7f6e（watch）：<\/p>\n watch(() => props.initSeconds, (val) => {
\n clearInterval(timerId)
\n isRunning.value = false
\n totalSeconds.value = val
\n}) <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u5f53\u7236\u7ec4\u4ef6\u5207\u6362"\u5de5\u4f5c\/\u4f11\u606f"\u6a21\u5f0f\u65f6，initSeconds \u53d8\u5316，Timer \u81ea\u52a8\u505c\u6b62\u5e76\u91cd\u7f6e\u2014\u2014\u4e0d\u9700\u8981\u7236\u7ec4\u4ef6\u624b\u52a8\u8c03\u7528 reset()\u3002<\/p>\n \u7b2c\u4e03：\u6307\u6325\u5bb6–App.vue<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0App.vue \u662f\u6574\u4e2a\u5e94\u7528\u7684\u6307\u6325\u5b98，\u5b83\u7f16\u6392 Timer \u7ec4\u4ef6，\u7ba1\u7406\u5e94\u7528\u72b6\u6001\u3002<\/p>\n \u6a21\u677f\u7ed3\u6784<\/p>\n <template>
\n <div class="bg-[#1a1a2e] text-white h-screen flex items-center justify-center font-sans">
\n <div class="text-center">
\n <h1 class="text-2xl mb-5">{{ modeText }}<\/h1>
\n <Timer :init-seconds="currentSeconds" @finish="onTimerFinish" ref="timerRef" \/>
\n <div class="grid grid-cols-2 gap-3 mt-8">
\n <button @click="startTimer" class="… bg-[#2ecc71]">\u5f00\u59cb<\/button>
\n <button @click="pauseTimer" class="… bg-[#f39c12]">\u6682\u505c<\/button>
\n <button @click="resetTimer" class="… bg-[#e74c3c]">\u91cd\u7f6e<\/button>
\n <button @click="switchMode" class="… bg-[#3498db]">\u5207\u6362\u4f11\u606f<\/button>
\n <\/div>
\n <\/div>
\n <\/div>
\n<\/template> <\/p>\n \u5e03\u5c40\u89e3\u8bfb：<\/p>\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 bg-[#1a1a2e] \u2502 \u2190 \u6df1\u84dd\u80cc\u666f，\u5168\u5c4f
\n\u2502 \u2502
\n\u2502 \u4e13\u6ce8\u65f6\u95f4 \/ \u4f11\u606f\u65f6\u95f4 \u2502 \u2190 h1 \u6807\u9898
\n\u2502 \u2502
\n\u2502 25:00 \u2502 \u2190 Timer \u7ec4\u4ef6
\n\u2502 \u2502
\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502
\n\u2502 \u2502 \u5f00\u59cb \u2502 \u2502 \u6682\u505c \u2502 \u2502 \u2190 2\u00d72 \u6309\u94ae\u7f51\u683c
\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502
\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502
\n\u2502 \u2502 \u91cd\u7f6e \u2502 \u2502\u5207\u6362 \u2502 \u2502
\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 <\/p>\n \u72b6\u6001\u7ba1\u7406：<\/p>\n const isWorkMode = ref(true) \/\/ \u5f53\u524d\u6a21\u5f0f
\nconst currentSeconds = ref(25 * 60) \/\/ \u5f53\u524d\u5012\u8ba1\u65f6\u79d2\u6570
\nconst timerRef = ref(null) \/\/ Timer \u7ec4\u4ef6\u7684\u5f15\u7528 <\/p>\n \u6a21\u5f0f\u5207\u6362\u903b\u8f91：<\/p>\n function switchMode() {
\n isWorkMode.value = !isWorkMode.value
\n currentSeconds.value = isWorkMode.value ? 25 * 60 : 5 * 60
\n} <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u5207\u6362\u6a21\u5f0f\u65f6：<\/p>\n \n- isWorkMode \u7ffb\u8f6c<\/li>\n
- currentSeconds \u53d8\u4e3a 25 \u5206\u949f\u6216 5 \u5206\u949f<\/li>\n
- \u7531\u4e8e watch(() => props.initSeconds) \u7684\u5b58\u5728，Timer \u81ea\u52a8\u91cd\u7f6e<\/li>\n<\/ul>\n
\u5b8c\u6210\u56de\u8c03：<\/p>\n function onTimerFinish() {
\n alert('\u65f6\u95f4\u5230！')
\n} <\/p>\n \u5f53\u524d\u4f7f\u7528 alert() \u5f39\u7a97\u3002\u5728\u751f\u4ea7\u7ea7\u5e94\u7528\u4e2d，\u53ef\u4ee5\u66ff\u6362\u4e3a\u7cfb\u7edf\u901a\u77e5（Notification API）\u6216 Electron \u7684 Tray \u63d0\u9192\u3002<\/p>\n \u7b2c\u516b：\u684c\u9762\u58f3–electron\/main.js<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Electron \u7684\u4e3b\u8fdb\u7a0b\u662f\u8fd9\u4e2a\u5e94\u7528\u7684"\u64cd\u4f5c\u7cfb\u7edf\u63a5\u53e3"\u3002\u5b83\u521b\u5efa\u7a97\u53e3\u3001\u7ba1\u7406\u5e94\u7528\u751f\u547d\u5468\u671f\u3002<\/p>\n import { app, BrowserWindow } from 'electron'
\nimport path from 'path'
\nimport { fileURLToPath } from 'url'<\/p>\n const __filename = fileURLToPath(import.meta.url)
\nconst __dirname = path.dirname(__filename) <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ESM \u517c\u5bb9\u5904\u7406：Electron \u4e3b\u8fdb\u7a0b\u4f7f\u7528 ESM（type: "module"），\u6240\u4ee5\u4e0d\u80fd\u7528 __dirname \u548c __filename\u3002\u901a\u8fc7 fileURLToPath \u624b\u52a8\u8ba1\u7b97\u3002<\/p>\n \u7a97\u53e3\u521b\u5efa<\/p>\n function createWindow() {
\n const win = new BrowserWindow({
\n width: 400,
\n height: 500,
\n resizable: false, \/\/ \u56fa\u5b9a\u5927\u5c0f，\u4e0d\u53ef\u62d6\u62fd\u7f29\u653e
\n webPreferences: {
\n nodeIntegration: false, \/\/ \u5b89\u5168：\u6e32\u67d3\u8fdb\u7a0b\u4e0d\u80fd\u76f4\u63a5\u7528 Node.js
\n contextIsolation: true \/\/ \u5b89\u5168：\u4e0a\u4e0b\u6587\u9694\u79bb
\n }
\n }) <\/p>\n \u5b89\u5168\u914d\u7f6e\u89e3\u8bfb：<\/p>\n \n\n\u914d\u7f6e\u9879<\/p>\n \u503c<\/p>\n \u4e3a\u4ec0\u4e48<\/p>\n<\/tr>\n \n\n| \n nodeIntegration<\/p>\n<\/td>\n | \n false<\/p>\n<\/td>\n | \n \u9632\u6b62\u6e32\u67d3\u8fdb\u7a0b\u6267\u884c require('child_process') \u7b49\u5371\u9669\u64cd\u4f5c<\/p>\n<\/td>\n<\/tr>\n | \n| \n contextIsolation<\/p>\n<\/td>\n | \n true<\/p>\n<\/td>\n | \n \u9632\u6b62\u7f51\u9875\u811a\u672c\u8bbf\u95ee Electron \u5185\u90e8 API<\/p>\n<\/td>\n<\/tr>\n | \n| \n resizable<\/p>\n<\/td>\n | \n false<\/p>\n<\/td>\n | \n \u756a\u8304\u949f\u662f\u6781\u7b80\u5de5\u5177，\u56fa\u5b9a\u5c3a\u5bf8\u66f4\u4e13\u6ce8<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n \u52a0\u8f7d\u7b56\u7565<\/p>\n if (process.env.VITE_DEV_SERVER_URL) {
\n win.loadURL(process.env.VITE_DEV_SERVER_URL) \/\/ \u5f00\u53d1\u6a21\u5f0f：\u52a0\u8f7d Vite \u670d\u52a1\u5668
\n } else {
\n win.loadFile(path.join(__dirname, '..\/dist\/index.html')) \/\/ \u751f\u4ea7\u6a21\u5f0f：\u52a0\u8f7d\u6253\u5305\u540e\u7684 HTML
\n } <\/p>\n \u4e24\u79cd\u6a21\u5f0f\u7684\u5207\u6362：<\/p>\n \u5f00\u53d1\u6a21\u5f0f：Electron \u2192 http:\/\/localhost:5173 \u2192 Vite HMR \u70ed\u66f4\u65b0
\n\u751f\u4ea7\u6a21\u5f0f：Electron \u2192 dist\/index.html \u2192 \u9759\u6001\u6587\u4ef6 <\/p>\n \u5e94\u7528\u751f\u547d\u5468\u671f<\/p>\n app.whenReady().then(createWindow)<\/p>\n app.on('window-all-closed', () => {
\n if (process.platform !== 'darwin') app.quit()
\n}) <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0macOS \u4e0a\u5173\u95ed\u6240\u6709\u7a97\u53e3\u540e\u5e94\u7528\u4ecd\u7136\u9a7b\u7559（macOS \u60ef\u4f8b），\u5176\u4ed6\u5e73\u53f0\u76f4\u63a5\u9000\u51fa\u3002<\/p>\n<\/p>\n \u5c3e\u58f0：\u4e00\u4e2a\u756a\u8304\u949f\u7684\u542f\u793a<\/h3>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u8fd9\u4e2a\u9879\u76ee\u867d\u7136\u53ea\u6709 ~300 \u884c\u6838\u5fc3\u4ee3\u7801，\u4f46\u5b83\u5c55\u793a\u4e86\u4e00\u4e2a\u73b0\u4ee3\u684c\u9762\u5e94\u7528\u5f00\u53d1\u7684\u5b8c\u6574\u8303\u5f0f：<\/p>\n Vue 3 \u2192 \u58f0\u660e\u5f0f UI + \u54cd\u5e94\u5f0f\u72b6\u6001
\nVite \u2192 \u6781\u901f\u6784\u5efa + HMR
\nElectron \u2192 Web \u6280\u672f \u2192 \u684c\u9762\u5e94\u7528
\nTailwind \u2192 \u539f\u5b50\u5316\u6837\u5f0f，\u96f6\u5fc3\u667a\u8d1f\u62c5 <\/p>\n \u756a\u8304\u949f\u7684\u7cbe\u9ad3\u4e0d\u5728\u4e8e\u4ee3\u7801，\u800c\u5728\u4e8e\u4e13\u6ce8\u3002\u613f\u8fd9\u4e2a\u5e94\u7528\u80fd\u5e2e\u4f60\u628a\u65f6\u95f4\u5207\u6210\u4e00\u5757\u5757\u756a\u8304，\u6bcf\u4e00\u5757\u90fd\u9971\u6ee1\u800c\u5145\u5b9e\u3002<\/p>\n<\/p>\n \u9644\u5f55：\u547d\u4ee4\u80cc\u540e\u7684\u6545\u4e8b<\/h3>\n\n\n\u547d\u4ee4<\/p>\n \u53d1\u751f\u4e86\u4ec0\u4e48<\/p>\n<\/tr>\n \n\n| \n npm install<\/p>\n<\/td>\n | \n \u5b89\u88c5\u6240\u6709\u4f9d\u8d56\u5230 node_modules，\u751f\u6210 package-lock.json<\/p>\n<\/td>\n<\/tr>\n | \n| \n npm run dev<\/p>\n<\/td>\n | \n \u542f\u52a8 Vite \u5f00\u53d1\u670d\u52a1\u5668，\u6d4f\u89c8\u5668\u53ef\u8bbf\u95ee localhost:5173<\/p>\n<\/td>\n<\/tr>\n | \n| \n npm run electron:dev<\/p>\n<\/td>\n | \n Vite + Electron \u540c\u65f6\u542f\u52a8，\u684c\u9762\u7a97\u53e3\u51fa\u73b0，\u652f\u6301\u70ed\u66f4\u65b0<\/p>\n<\/td>\n<\/tr>\n | \n| \n npm run electron:build<\/p>\n<\/td>\n | \n Vite \u6253\u5305 Vue \u2192 dist\/，Electron Builder \u6253\u5305\u4e3a exe \u2192 dist_electron\/<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":" \u8fd9\u662f\u4e00\u4e2a\u5173\u4e8e\u65f6\u95f4\u3001\u4ee3\u7801\u548c Electron \u7684\u6545\u4e8b\u3002\u6211\u4eec\u5c06\u8ddf\u968f\u4e00\u4e2a\u756a\u8304\u949f\u5e94\u7528（Tomato Clock）\u4ece\u4e00\u884c\u547d\u4ee4\u5230\u684c\u9762\u7a97\u53e3\u7684\u5b8c\u6574\u65c5\u7a0b，\u9010\u5c42\u5256\u6790\u5b83\u7684\u6e90\u7801\u67b6\u6784\u3002 \u89e3\u8bfb\u6e90\u7801\u94fe\u63a5
\n\u5e8f：\u4e00\u5207\u4ece\u4e00\u4e2a\u547d\u4ee4\u5f00\u59cb \u6df1\u591c，\u4f60\u6572\u4e0b：
\nnpm run electron:dev \u5c4f\u5e55\u4eae\u8d77，\u4e00\u4e2a 400\u00d7500 \u7684\u684c\u9762\u7a97\u53e3\u7f13\u7f13\u6d6e\u73b0\u2014\u2014\u6df1\u84dd\u8272\u80cc\u666f，\u767d\u8272\u6570\u5b57 25:00，\u56db\u4e2a\u5f69<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11820,12567,12764,625],"topic":[],"class_list":["post-112220","post","type-post","status-publish","format-standard","hentry","category-server","tag-atomgit","tag-12567","tag-12764","tag-vue-js"],"yoast_head":"\n \u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/112220.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u662f\u4e00\u4e2a\u5173\u4e8e\u65f6\u95f4\u3001\u4ee3\u7801\u548c Electron \u7684\u6545\u4e8b\u3002\u6211\u4eec\u5c06\u8ddf\u968f\u4e00\u4e2a\u756a\u8304\u949f\u5e94\u7528（Tomato Clock）\u4ece\u4e00\u884c\u547d\u4ee4\u5230\u684c\u9762\u7a97\u53e3\u7684\u5b8c\u6574\u65c5\u7a0b，\u9010\u5c42\u5256\u6790\u5b83\u7684\u6e90\u7801\u67b6\u6784\u3002 \u89e3\u8bfb\u6e90\u7801\u94fe\u63a5 \u5e8f：\u4e00\u5207\u4ece\u4e00\u4e2a\u547d\u4ee4\u5f00\u59cb \u6df1\u591c，\u4f60\u6572\u4e0b： npm run electron:dev \u5c4f\u5e55\u4eae\u8d77，\u4e00\u4e2a 400\u00d7500 \u7684\u684c\u9762\u7a97\u53e3\u7f13\u7f13\u6d6e\u73b0\u2014\u2014\u6df1\u84dd\u8272\u80cc\u666f，\u767d\u8272\u6570\u5b57 25:00，\u56db\u4e2a\u5f69\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/112220.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-02T13:48:49+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/112220.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/112220.html\",\"name\":\"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-10-02T13:48:49+00:00\",\"dateModified\":\"2026-10-02T13:48:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/112220.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/112220.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/112220.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/112220.html","og_locale":"zh_CN","og_type":"article","og_title":"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u8fd9\u662f\u4e00\u4e2a\u5173\u4e8e\u65f6\u95f4\u3001\u4ee3\u7801\u548c Electron \u7684\u6545\u4e8b\u3002\u6211\u4eec\u5c06\u8ddf\u968f\u4e00\u4e2a\u756a\u8304\u949f\u5e94\u7528（Tomato Clock）\u4ece\u4e00\u884c\u547d\u4ee4\u5230\u684c\u9762\u7a97\u53e3\u7684\u5b8c\u6574\u65c5\u7a0b，\u9010\u5c42\u5256\u6790\u5b83\u7684\u6e90\u7801\u67b6\u6784\u3002 \u89e3\u8bfb\u6e90\u7801\u94fe\u63a5 \u5e8f：\u4e00\u5207\u4ece\u4e00\u4e2a\u547d\u4ee4\u5f00\u59cb \u6df1\u591c，\u4f60\u6572\u4e0b： npm run electron:dev \u5c4f\u5e55\u4eae\u8d77，\u4e00\u4e2a 400\u00d7500 \u7684\u684c\u9762\u7a97\u53e3\u7f13\u7f13\u6d6e\u73b0\u2014\u2014\u6df1\u84dd\u8272\u80cc\u666f，\u767d\u8272\u6570\u5b57 25:00，\u56db\u4e2a\u5f69","og_url":"https:\/\/www.wsisp.com\/helps\/112220.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-02T13:48:49+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/112220.html","url":"https:\/\/www.wsisp.com\/helps\/112220.html","name":"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-10-02T13:48:49+00:00","dateModified":"2026-10-02T13:48:49+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/112220.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/112220.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/112220.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u4ece\u96f6\u5f00\u59cb\u7684\u6545\u4e8b\uff1a\u4e00\u4e2a\u756a\u8304\u949f\u662f\u5982\u4f55\u8bde\u751f\u7684"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/112220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=112220"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/112220\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=112220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=112220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=112220"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=112220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} | | |