写完直播平台，有种需要搞个配套的桌面端软件的感觉（，于是抱着充盈一下自己技术栈的考虑，先做一个小工具帮我干干跑签到脚本的活。看了一圈桌面端开发，比较符合技术栈学习成本比较低的还得是Electron （最爱Chromium的一集）。别问为啥不用flutter和dotnet，学习成本好高啊kora！
首先呢，去官网翻了一圈，学了一下怎么搭建一个基础的项目，但是呢官网的教程是原生HTML+JS，有点难搞（炒鸡不想写原生JS 更别说JQ 最讨厌$的一集）。一想肯定有办法跑Vue或者React，直接一个其人之道开偷，Github启动。翻了一圈，找到了个蛮好用的包可以跑Vite叫electron-vite。于是翻翻文档开始动手搭环境。
基本搭建方式（原生HTML+JS）
Bash1 2mkdir script_plateform3 4cd script_plateform5 6touch index.html7 8touch main.js9 10yarn init 11 12yarn add electron --dev
HTML1//index.html2 3<!DOCTYPE html>4<html lang="en">5<head>6 <meta charset="UTF-8">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <meta http-equiv="X-UA-Compatible" content="ie=edge">9 <title>test</title>10</head>11<body>12 hello world13</body>14</html>15
js1//main.js2//主进程3 4//引入electron模块5var electron =require('electron');6 7//nodejs中的path模块8var path=require('path');9 10//创建electron引用 控制应用生命周期的模块11var app=electron.app; 12 13//创建electron BrowserWindow的引用 窗口相关的模块14var BrowserWindow=electron.BrowserWindow;15 16//变量 保存对应用窗口的引用17var mainWindow=null;18 19function createWindow(){20 //创建BrowserWindow的实例 赋值给mainWindow打开窗口 21 mainWindow=new BrowserWindow({width:800,height:600,webPreferences: {22 nodeIntegration: true23 }}); 24 25 mainWindow.loadFile(path.join('index.html'));26 //开启渲染进程中的调试模式27 mainWindow.webContents.openDevTools();28 29 mainWindow.on('closed',()=>{30 mainWindow=null;31 }) 32 33}34 35app.on('ready',createWindow)36 37// 当所有的窗口被关闭后退出应用 Quit when all windows are closed.38app.on('window-all-closed', () => {39 // On OS X it is common for applications and their menu bar40 // to stay active until the user quits explicitly with Cmd + Q41 42 // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出43 if (process.platform !== 'darwin') {44 app.quit();45 }46 });47 48//macos49app.on('activate', () => {50// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他51 if (mainWindow === null) {52 createWindow();53 }54});
到这里基本环境就搭建完了，接下来我们讲讲怎么用electron-vite装个vue3。
利用electron-vite搭建项目
PS：要求node版本＞18+和vite版本4.0+
Bash1yarn add electron-vite -D
然后就是简简单单的yarn跑一下
Bash1yarn create @quick-start/electron my-app --template vue
项目搭建的时候是和vite差不多的都可以使用不同的模板进行搭建 具体的模板可以看这个快速开始 | electron-vite
到这里我们就搭建好了项目，接下来我们可以研究研究electron的线程了。
