用Electron+Vue3|用Electron+Vue3 来做一个炫酷的插件工具箱用Electron+Vue3来做一个炫酷的插

前言某天，我在不同项目之间来回复制代码粘贴。频繁切换编辑器让我倍感繁琐，我在想：“要是能写一个工具，将所有内容复制起来，然后再一个个拷出来就方便多了。”
这个时候测试同事来到了我的旁边，看到我电脑桌面的便笺工具写满了密密麻麻的工作事项。表示也想用一个，让我帮他打开。结果到他电脑上发现没有自带的便笺工具。
二话不说，马上就用electron写了一个简单的小工具，名为iHelper，里面包含了几个小功能：便笺，剪贴板记录，待办事项...。

文章图片

iHelper完成了之后发给同事使用，这个时候T同事说：“我也想写点东西，可以加在你的iHelper里面吗？”
“那当然可以啊”。正当我准备把同事加到仓库成员里时，我又想到：“如果iHelper能支持运行别人的web项目，像小程序那样。将一个web项目以插件为单位添加在软件中并运行，是不是就能让更多的前端同事参与进来，增加自己想要的工具呢”
于是琢磨一番，将iHelper改成了一个支持上传下载安装的插件平台。并将原先的功能便笺，剪贴板记录，待办事项拆分为单独的web项目。以可自由下载的插件发布到iHelper的插件商店中。以此作为学习的项目，并记录分享其中的过程。
iHelper iHelper是一个包含工作便利插件的插件工具箱，支持下载安装插件/上传发布插件/打包插件。
在iHelper中，所有的插件都是一个单独的web项目。每个web项目都会有一个配置文件plugin.json来描述此插件的信息。当在iHelper中下载插件时，其实是从远程服务器下载此插件项目打包后的资源文件，并根据配置来将此插件装载进iHelper中。
在运行插件时，iHelper会打开新的应用窗体。并且根据plugin.json指定的访问入口文件进行加载。这样就完成了项目插件化的效果。

文章图片

下载/文档 iHelper项目仓库
iHelper插件仓库
iHelper文档地址
iHelper安装包下载地址(github)
iHelper安装包下载地址(gitee，国内较快)
技术选型桌面应用框架 Electron + Typescript
Node.js数据库 nedb
渲染进程框架 Vue3 + Typescript
UI框架 Element-plus
后端 NestJS
功能点