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

相关推荐
bysking6 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu7 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵8 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
龚思凯12 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋22 分钟前
Web后端开发(请求、响应)
前端
red润28 分钟前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js
Fly-ping29 分钟前
【前端】vue3性能优化方案
前端·性能优化
curdcv_po31 分钟前
前端开发必要会的,在线JS混淆加密
前端
天生我材必有用_吴用33 分钟前
深入理解JavaScript设计模式之单例模式
前端
LuckySusu33 分钟前
【HTML篇】DOCTYPE 声明:掌握浏览器渲染模式的关键
前端·html