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

前言

某天,我在不同项目之间来回复制代码粘贴。频繁切换编辑器让我倍感繁琐,我在想:“要是能写一个工具,将所有内容复制起来,然后再一个个拷出来就方便多了。”

这个时候测试同事来到了我的旁边,看到我电脑桌面的便笺工具写满了密密麻麻的工作事项。表示也想用一个,让我帮他打开。结果到他电脑上发现没有自带的便笺工具。

二话不说,马上就用electron写了一个简单的小工具,名为iHelper,里面包含了几个小功能:便笺,剪贴板记录,待办事项...。

用Electron+Vue3 来做一个炫酷的插件工具箱_第1张图片

iHelper完成了之后发给同事使用,这个时候T同事说:“我也想写点东西,可以加在你的iHelper里面吗?”

“那当然可以啊”。正当我准备把同事加到仓库成员里时,我又想到:“如果iHelper能支持运行别人的web项目,像小程序那样。将一个web项目以插件为单位添加在软件中并运行,是不是就能让更多的前端同事参与进来,增加自己想要的工具呢”

于是琢磨一番,将iHelper改成了一个支持上传下载安装的插件平台。并将原先的功能便笺,剪贴板记录,待办事项拆分为单独的web项目。以可自由下载的插件发布到iHelper的插件商店中。以此作为学习的项目,并记录分享其中的过程。

iHelper

iHelper是一个包含工作便利插件的插件工具箱,支持下载安装插件/上传发布插件/打包插件。

iHelper中,所有的插件都是一个单独的web项目。每个web项目都会有一个配置文件plugin.json来描述此插件的信息。当在iHelper中下载插件时,其实是从远程服务器下载此插件项目打包后的资源文件,并根据配置来将此插件装载进iHelper中。

在运行插件时,iHelper会打开新的应用窗体。并且根据plugin.json指定的访问入口文件进行加载。这样就完成了项目插件化的效果。

用Electron+Vue3 来做一个炫酷的插件工具箱_第2张图片

下载/文档

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. ...(还有更多待补充)

你可能感兴趣的:(用Electron+Vue3 来做一个炫酷的插件工具箱)