# uTools 插件启动模板

**Repository Path**: wuracle/utools-plugin-starter

## Basic Information

- **Project Name**: uTools 插件启动模板
- **Description**: uTools 插件启动模板，技术栈为： Vite + Vue3 + Element-Plus + Unocss + TypeScript
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 3
- **Created**: 2024-01-11
- **Last Updated**: 2025-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: utools, 插件, 模板, vue3, vite

## README





#  uTools 插件启动模板 ⚙️

开箱即用的 uTools 插件启动模板，包含了常用的配置，可以直接开始开发 uTools 插件。


技术栈：
1. TypeScript
   1. 包括官方 API `uTool` 提供的类型定义：[https://github.com/uTools-Labs/utools-api-types](https://github.com/uTools-Labs/utools-api-types)
2. Vite
   1. 组件自动加载
   2. 模块自动加载
   3. 文件路由支持
   4. api 自动加载
3. Vue3
4. PNPM
5. Element-Plus + UnoCSS

## 开发教程

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

打开 uTools，搜索 uTools 开发者工具：

![1704943011184](img/ffd40e735db560627b257c63141c7d2ed8a530125607ca7c410dc8998732f3a4.png)  



![1704943021624](img/9e3ede8ab006e071d3d0a8a1a9c4a3e63e522c2cd113d7de3415a177bd62498b.png)  


填写插件信息：



![1704943038844](img/b387a0f10e0606555faf5164e4b839b700f4a59aa9ce27fe3b0399ca284053fe.png)  


直接下载一个 uTools 启动模板：[https://gitee.com/penggeor/utools-plugin-starter](https://gitee.com/penggeor/utools-plugin-starter)，这个模板技术栈主要为 Vite + Vue3 + TypeScript

![1704943050513](img/6473e2a9cd87f746a4e50b7fcaa45945bc8562bd69fbec3127f4d0384ed01968.png)  


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


![1704943068707](img/a71d1a7c3bd327d4fcd9ac129847168c43433dda28fa22464a021f3b2699a6fd.png)  


接着先启动模板项目，先用 `pnpm install`，然后执行 `pnpm dev` 启动项目：


![1704943081188](img/383797285677276fef0e25adf885ee0a4940c174363192f9a0f89ae334524346.png)  


然后启动 uTools 插件：


![1704943089416](img/851b2818d9b7211cd2fdd44a6b8bfa54bee3997039fdc85aeb3ee2be9f821b55.png)  


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

![1704943099984](img/5f5e56ae8cee4e96d746b0d2adbd35611aa1bdf30faf94e497ed64cd136ddc51.png)  



![1704943106679](img/62d205abd6ee5b346fef723cc004b868b0dffc9ee9fa4d532ac9c975665dd7d2.png)  



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

开发注意点：
1. 如果更改了 logo，需要重启 uTools 才能生效
2. 官方提供的 API `uTools` 变量已经添加 TypeScript 支持

其他问题可以查询下「猿料」社区：[https://yuanliao.info/](https://yuanliao.info/)

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


![1704943119726](img/6441b128abf4e81a53074298afae1ab6ef889be47af714615adc57958959a4e7.png)  


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


![1704943130921](img/99215488f745025f6cd35d176258f1c30a9afba5a3a316574e285ee28b613eda.png)  


然后就是点击发布版本：


![1704943140271](img/b8703f1717e7de9738bd84c31b6fd1ace62433f26c6c7976b74dacef71b1a2b0.png)  


路径记得选择为 `dist`：

![1704943148236](img/03e2eff0aa385521d68d567c978a477a8a63b1a2a0a8b88bacdd9056f5e23657.png)  



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

![1704943156538](img/515de3a87fe15ffeb5b2d254606da184bc3e9c3e515a4d6740c1b6c169a738b5.png)  


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


![1704943165989](img/a3538f6c76fbc62f806579b8f75315c31c7d31f1714796bf64a793a8ee6803a0.png)  


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

## 感谢

本项目基于：https://github.com/markthree/utools-plugin-starter

其他模板项目参考：
- https://gitee.com/qiaoshengda/vite-utools-template/blob/master/package.json
- https://github.com/13enBi/vite-plugin-utools