快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子，快速安装Electron)

一、介绍 😆 😁 😉

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。

二、搭建Vite+Vue3+TypeScript项目 😆 😁 😉

根据vite官网文档

yarn create vite

项目创建完成后进入ts-super-procedure目录，执行yarn安装相关依赖

三、安装Electron相关依赖 😆 😁 😉

如果你自己安装过Electron的相关依赖，想必你一定经历过失败、失败、失败。

这里需要借助一个网站检测服务器响应速度，然后拿到最快响应的ip进行本地配置加快我们的域名解析。

通过该工具可以多个地点Ping服务器以检测服务器响应速度。检查github.com。我都选择国内的，看自己想法选择啊。

修改 C:\Windows\System32\drivers\etc\hosts

20.27.177.113 github.com

安装electron依赖 👇 👇 👇 👇

yarn add -D electron electron-builder

根据官网提供的文档,需要创建一个BrowserWindow装载vite项目,你也可以写一个html页面。 这里我们启动vite项目以后就会产生一个连接，正好把它装载到 BrowserWindow中。

因为src下面存放的使我们的vite项目，所以在根目录下创建一个electron.ts，你也可以叫man.ts，名字随便起，知道是干啥的就行。

配置完成以后分别启动yarn dev 和 yarn start，出现以下窗口表示搭建成功了。

四、优化 😆 😁 😉

因为现在需要启动两个服务，比较麻烦，可以借助concurrently插件整合。一个命令完成多个应用的启动。

yarn add concurrently -D

安装完成以后修改启动和打包命令 

"scripts": {"dev": "concurrently \"vite\" \"electron .\"","build": "yarn build:vite && yarn build:electron","build:vite": "vue-tsc && vite build","build:electron": "electron-builder","preview": "vite preview"
},

执行yarn dev 进行检测，出现下面的内容表示配置成功，基础脚手架就已经搭建完成了。下面开启你的桌面应用开发旅程吧。我要过五一去了

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇