分享一个开箱即用的utools插件开发模板🍟

utools-plugin-template

今天给大家带来一个开源的utools插件开发模板,让你更快的开发一个属于自己的utools插件

为什么用模板

因为模板可以帮助我们更快的开发,并且减少一些重复的配置工作,大大提高开发效率

这个模板也是我在开发utools插件时,萌生出的一个想法,因为当时我想开发一个插件的时候并没有一个基础模板,我得从官方开发者模板中一步一步的新建文件,并配置一些字段信息,这个过程显得有点繁琐,而且可能会出错的概率

模板界面

模板功能

  • 🌈 开箱即用的Vite+Vue3Utools插件开发模板
  • ⚡ 开发环境自动注入HMR字段
  • 🦍 自动构建upx
  • 🧸 构建utools/preload文件,处理第三方依赖
  • 🚀 构建桌面应用

模板使用

这个模板的使用也是很简单的,你只需要将这个模板克隆下来,并安装依赖,然后就可以开始开发自己的插件了

bash 复制代码
git clone https://github.com/QC2168/utools-plugin-template
cd utools-plugin-template
npm install

接下来,你只需要配置一些关于你的插件信息就可以了

由于涉及到比较多图片简介,这里就不一一贴出来了(详细见readme.md

集成Electron

在开发这个模板的过程中,也收集了一些用户反馈,有些开发者希望开发插件时,同时也能构建一个exe文件

所以这个模板集成了Electron的开发环境,可以让你更快的开发插件,并且可以直接打包成exe文件,让你的插件更加的方便使用

在开发/构建的时候,你只需要执行一条命令即可😜

bash 复制代码
# 本地开发
npm run dev:electron
# 构建应用
npm run build:electron

electron集成部分使用了caoxiemeihao大佬的vite-plugin-electron插件来实现 🌹

这个是当项目运行electron时的开发界面

模板功能实现

模板中的一些功能实现,实际上是依靠模板中的@qc2168/vite-plugin-utools插件实现的,也即是如果你想要模板中的功能也可以通过安装插件的方式在你的项目中实现(不包含electron部分)

这个也是因为在我开发utools插件时,踩的一个坑后开发出来的,最起初的目的是解决第三方依赖丢失问题

到后面在写模板时,又新增了插件热更新,插件打包等功能

插件仓库地址:vite-plugin-utools

最后

希望这个模板能够帮助到你,如果有什么问题,欢迎提issue,我会尽力的解答你的问题

如果这个模板对你有帮助,请给这个项目点一个⭐️,谢谢!

模板仓库地址:utools-plugin-template 插件仓库地址:vite-plugin-utools

相关推荐
xiaofeichaichai38 分钟前
Webpack
前端·webpack·node.js
问心无愧05131 小时前
ctf show web入门111
android·前端·笔记
唐某人丶1 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界1 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌2 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel3 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3113 小时前
https连接传输流程
前端·面试
徐小夕3 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
threelab3 小时前
Three.js 物理模拟着色器 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器