Electron+Vue3.2+TypeScript+Vite开发桌面端

 Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。 

   Electron官网上说： **“比你想象的更简单”** ————“如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”

   Vue 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。

   我找到了一个插件：**vite-plugin-electron**，可以很方便的帮我们把 electron 和 vue 结合起来，开发起来非常方便。

目录结构设计

因为我们需要使用 Electron 和 vue 进行开发，因此我们把它们分开目录存储，基础目录结构如下：

• electron-main：主进程目录
• electron-preload：预加载代码目录，主要是定义桥接通信
• 其他文件：也就是 vue 初始化后的目录

目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构，目前还没有提供设置修改。

初始化项目目录

下面就开始初始项目

yarn create vite electron-desktop --template vue-ts 

先使用 vite 创建 vue 项目，然后我们再将 electron 嵌入到里面

初始化完成后，我们先做一个本地 yarn 源的配置，防止下载库的时候出现异常。

配置.yarnrc

registry "https://registry.npm.taobao.org/"

electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/" 

配置完下载源后，就可以安装 electron 了

安装Electron

yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer 

• electron-builder：打包工具
• rimraf：快速删除文件或目录工具
• vite-plugin-electron：vite 结合 electron 的库，关于这个插件可以参见 Vite 与 Electron 无缝衔接
• electron-devtools-installer：electron 开发工具

vite-plugin-electron 插件是将 vite 和 electron 结合在一起的，可以让我们非常方便的结合 electron 和 vue，需要做一些指定的配置。