这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

electron + vue3 + ts 实现桌面小工具第一天

electron是什么

Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。

使用electron，我们可以使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。

首先我们使用vue-cli脚手架搭建一个项目。

vue create test

这里我用的css预处理是scss，推荐大家选择dart-sass，不要node-sass。

接下来我们使用Vue CLI Plugin Electron Builder在vue3项目中集成electron，非常简单，我们只要运行命令：

vue add electron-builder

安装完成之后我们还有几步要做：

// @/router/index.ts
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
await installExtension(VUEJS3_DEVTOOLS)

如果不删除的话，就会翻墙去下VUEJS3_DEVTOOLS，每次run serve 的时候都很慢，像这样：

让我们试着运行一下：

yarn electron:serve

结果如图

如果你认为接下来就要进入开发的环节就太天真了，现在我们需要尝试打包，不然开发完成后，不能打包，就真的恶心到自己了。

运行

yarn electron:build

果不其然，报错了！还好老子机智，先试了一下打包

我们去淘宝的npm.taobao.org/mirrors/ele… 找到报错中的包，下载下来。把他放在~/AppData/Local/electron/Cache/目录下。

打包的时候，可能会出现上述下载包失败，可以去网上找相应的包。

再次运行yarn electron:build。

又报错了，气啊！！

这次是因为我的项目所在的路径又中文，这里特别提醒一下，不要有中文！！！

再次运行yarn electron:build。

又又又报错了！

这次的问题，我的解决方式是将电脑的杀毒软件都关了。就不报错了

打包成功！！谢天谢地

幸好提前测试打包，不然开发完之后，打包报错肯定影响心情。

ps: 让我想一下明天写啥