分享一个开箱即用的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

相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友5 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar5 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin8 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial