前言
某天，我在不同项目之间来回复制代码粘贴。频繁切换编辑器让我倍感繁琐，我在想：“要是能写一个工具，将所有内容复制起来，然后再一个个拷出来就方便多了。”
这个时候测试同事来到了我的旁边，看到我电脑桌面的便笺工具写满了密密麻麻的工作事项。表示也想用一个，让我帮他打开。结果到他电脑上发现没有自带的便笺工具。
二话不说，马上就用electron写了一个简单的小工具，名为iHelper，里面包含了几个小功能：便笺，剪贴板记录，待办事项...。
iHelper完成了之后发给同事使用，这个时候T同事说：“我也想写点东西，可以加在你的iHelper里面吗？”
“那当然可以啊”。正当我准备把同事加到仓库成员里时，我又想到：“如果iHelper能支持运行别人的web项目，像小程序那样。将一个web项目以插件为单位添加在软件中并运行，是不是就能让更多的前端同事参与进来，增加自己想要的工具呢”
于是琢磨一番，将iHelper改成了一个支持上传下载安装的插件平台。并将原先的功能便笺，剪贴板记录，待办事项拆分为单独的web项目。以可自由下载的插件发布到iHelper的插件商店中。以此作为学习的项目，并记录分享其中的过程。
iHelper
iHelper是一个包含工作便利插件的插件工具箱，支持下载安装插件/上传发布插件/打包插件。
在iHelper中，所有的插件都是一个单独的web项目。每个web项目都会有一个配置文件plugin.json来描述此插件的信息。当在iHelper中下载插件时，其实是从远程服务器下载此插件项目打包后的资源文件，并根据配置来将此插件装载进iHelper中。
在运行插件时，iHelper会打开新的应用窗体。并且根据plugin.json指定的访问入口文件进行加载。这样就完成了项目插件化的效果。
下载/文档
技术选型
桌面应用框架 Electron + Typescript
Node.js数据库 nedb
渲染进程框架 Vue3 + Typescript
UI框架 Element-plus
后端 NestJS
功能点
- 插件新增，插件启动
- 插件运行，插件窗体管理
- 插件版本管理
- 插件开发者模式，API、数据库支持
- 插件重载，插件打包，插件发布
- 第三方插件压缩包安装
- 插件下载，插件安装，插件更新
- 插件设置
- 用户账号登录注册
- 应用设置，快捷键管理
- 应用更新
- 应用常规功能（拖拽，缩放，最小化，托盘，退出...）
应用功能构思
插件是其他开发者编写的web应用
能够添加、打包、发布、安装、运行插件
将各个应用整合为插件系统的好处：
- 工具箱整合多种插件，避免安装多个软件，占用电脑过多空间
- 插件体积小，更新效率快
- 统一封装的api方便各插件执行系统交互逻辑
在项目开发的过程中，也开源了其他依赖项目
- 剪贴板监听工具——electron-clipboard-observer
- vue3的右键菜单库——vue3-context-menu
最后
如果你想要学习（electron/vue3/插件系统整合）的项目，希望这个项目代码和后续的文章可以帮助到你。
iHelper的开发过程后续以几篇文章来总结分享，作为一个学习总结
- 搭建iHelper的项目目录架构
- 插件的添加以及开发者模式功能
- 插件下载、安装、版本管理
- 应用设置，插件的设置，快捷键管理，应用更新，常规功能
- ...（还有更多待补充）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。