快速开发、打包、上架一个 uTools 插件

本文将从零开始,一步步完成整个开发、打包和上架流程。

打开 uTools,搜索 uTools 开发者工具:

新建项目:

填写插件信息:

直接下载一个 uTools 启动模板:gitee.com/penggeor/ut...,这个模板技术栈主要为 Vite + Vue3 + TypeScript

克隆项目之后,将 plugin.json 文件定位到下载的项目

接着先启动模板项目,先用 pnpm install,然后执行 pnpm dev 启动项目:

然后启动 uTools 插件:

然后在 uTools 上就可以看到并打开我们的插件了:

接着就像开发 Web 正常流程一样开发我们的插件。

开发注意点:

  1. 如果更改了 logo,需要重启 uTools 才能生效
  2. 官方提供的 API uTools 变量已经添加 TypeScript 支持

其他问题可以查询下「猿料」社区:yuanliao.info/

也可以在官方公众号上去添加插件开发群咨询:

开发之后,使用命令 pnpm build 打包项目到 dist 文件,模板除了会打包项目, 还会把插件文件比如 plugin.jsonlogo.png 等一起放到最终的 dist 文件中:

然后就是点击发布版本:

路径记得选择为 dist

填写版本说明、插件应用介绍和上传插件截图:

接着就能看到你的发布的工具了:

以上就是快速开发、打包、上架一个 uTools 插件的内容。

相关推荐
月光技术杂谈几秒前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
peachSoda71 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
我有一棵树1 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊1 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript