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

相关推荐
青青家的小灰灰7 小时前
金三银四面试官最想听的 React 答案:虚拟 DOM、Hooks 陷阱与大型列表优化
前端·react.js·面试
HelloReader7 小时前
深入理解 Tauri 架构与应用体积优化实战指南
前端
lemon_yyds7 小时前
vue 2 升级vue3 : ref 和 v-model 命名为同名
前端·vue.js
codingWhat7 小时前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview
重庆穿山甲7 小时前
Java开发者的大模型入门:Spring AI Alibaba组件全攻略(二)
前端·后端
光影少年8 小时前
在 React 中,什么情况下需要用 useCallback 和 useMemo?它们的区别是什么?
前端·react.js·掘金·金石计划
合天网安实验室8 小时前
H2O-3反序列化漏洞分析(CVE-2025-6507&CVE-2025-6544)
前端·黑客
袋鱼不重8 小时前
Typescript 核心概念
前端·typescript
重庆穿山甲8 小时前
Java开发者的大模型入门:Spring AI Alibaba组件全攻略(一)
前端·后端
ssshooter8 小时前
Tauri 踩坑 appLink 修改后闪退
前端·ios·rust