用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

功能点

• 插件新增，插件启动
• 插件运行，插件窗体管理
• 插件版本管理
• 插件开发者模式，API、数据库支持
• 插件重载，插件打包，插件发布
• 第三方插件压缩包安装
• 插件下载，插件安装，插件更新
• 插件设置
• 用户账号登录注册
• 应用设置，快捷键管理
• 应用更新
• 应用常规功能（拖拽，缩放，最小化，托盘，退出...）

应用功能构思

插件是其他开发者编写的web应用

能够添加、打包、发布、安装、运行插件

将各个应用整合为插件系统的好处：

1. 工具箱整合多种插件，避免安装多个软件，占用电脑过多空间
2. 插件体积小，更新效率快
3. 统一封装的api方便各插件执行系统交互逻辑

在项目开发的过程中，也开源了其他依赖项目

1. 剪贴板监听工具——electron-clipboard-observer
2. vue3的右键菜单库——vue3-context-menu

最后

如果你想要学习（electron/vue3/插件系统整合）的项目，希望这个项目代码和后续的文章可以帮助到你。

iHelper的开发过程后续以几篇文章来总结分享，作为一个学习总结

1. 搭建iHelper的项目目录架构
2. 插件的添加以及开发者模式功能
3. 插件下载、安装、版本管理
4. 应用设置，插件的设置，快捷键管理，应用更新，常规功能
5. ...（还有更多待补充）