vue3+ts+electron 创建一个桌面应用
Electron是一个允许前端开发者使用HTML、CSS和JavaScript构建跨平台桌面应用的开源框架。它结合了Chromium的渲染能力和Node.js的事件驱动I/O模型，让开发者能够利用熟悉的Web技术栈来创建桌面应用。前端开发者无需学习新的开发框架或语言，就能快速构建出功能丰富的桌面应用。
一 环境
下载并安装node(v16.14.2)，node官网
全局安装 Vue CLI 工具：@vue/cli 5.0.8)
npm install -g @vue/cli
npm install electron -g
nvm
由于前端一些项目原因可能会用到多个node 版本，这时候我们就需要安装一个版本管理工具，还有就是electron的一些插件对node版本也有些要求。
- 安装 nvm，先卸载原先的 node。
ps: 如果之前安装过 nvm，但是发现用 nvm use 命令使用版本无效的，这可能是环境变量无效或者nvm安装混乱导致的，那我们就删除重新安装一遍，首先打开环境变量找到nvm路径(如图)，再找到nvm的安装目录，清除掉 nvm 和 nodejs这两个文件夹，然后打开控住面板卸载掉 nvm，这时去环境变量里面看看nvm的配置也没有了，干干净净的，然后开始重装nvm。
- 下载并安装 nvm(1.1.12) ->下载 然后windows+r，输入cmd，打开命令提示符窗口输入一下命令查看是否安装成功
nvm -v
- 还有就是原先的那个淘宝镜像域名失效了重新换一个新的，查看 nvm 环境变量，找到nvm路径，在nvm安装目录下找到 settings.txt 文件，打开并添加以下内容
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
然后你可能还需要安装一下cnpm，可以看看这个->跳转
还有yarn，可以看看这个->跳转
好了，如果有些你安装了的可以直接跳过，如果没有可以安装一下。
二 用 vue-cli 创建一个 vue3 项目
vue create my-project
cd my-project
npm run serve
然后就可以看看项目是否运行成功了
三 vue项目中添加electron
运行成功了之后，退出项目，输入以下内容添加electron
vue add electron-builder
安装的时候会弹出“choose electron version”叫你选择版本，看你自己情況选择，我选的是 13.0.0。
安装过程中可能会报错，报错我们再安装一下就可以了(cnpm install electron@13.0.0)。
下图是安装之后的目录图，可以明显看到有个background.ts。
最后如果没有报错了，就运行项目。
npm run electron:serve
运行项目可能会报错，看提示是没安装 ts-loader，重新安装一下(cnpm install ts-loader@8.2.0 -D)， 再次运行项目，运行成功，但是 background.ts中有一处代码报错注释一下就可以了(是安装vue-devtools 失败的报错，下面会说)
// Install Vue Devtools
// try {
// await installExtension(VUEJS3_DEVTOOLS);
// } catch (e) {
// console.error("Vue Devtools failed to install:", e.toString());
// }
然后我们来解决安装vue-devtools失败的问题，这是因为其下载地址国内无法访问导致的，这个可以参考这个(手把手教你在 electron 环境下使用 vue-devtools)，加载本地的 vue-devtools插件到electron项目中，亲测有效。
当然如果你本地有vue-devtools，你直接可以复制以下代码，把其中的绝对路径改成你本地vue-devtools的绝对路径就可以了。
// 新增的：安装本地vue-devtools
const { session } = require("electron");
let devtoolsPath = "D:/xxx/vue_devtools/6.0.0.21"
session.defaultSession.loadExtension(devtoolsPath);
最后说一下node版本和插件版本安装不对，真的搞人，以上版本号可供参考一下。
四 打包
使用npm run electron:build进行打包，首次打包可能会下载一些东西会比较慢，也有可能会出现下载报错等情况，多打包几次下载就好了，因为都是github上的下载地址，当然科学上网就没啥毛病了，最后出现Build complete !就表示我们打包成功了
PS:提示一下打包的时候，项目路径不要带中文不然也会报错的。
