使用 vue 进行 utools 插件开发

为什么要开发 utools 插件

首先 utools 工具目前是快速启动比较高效的，其次它已经形成了一个生态，使用者通过插件应用市场下载相应的插件进行付费，而开发者可以通过开发插件形式放到应用市场上进行售卖。目前我了解到前端之虎开发的易待办是相对比较成功的，也受到了官方的推荐，这次我们主要了解下怎么去开发一个 utools 插件。

utools 环境搭建

1. 下载安装 utools 工具 首先访问官网下载客户端工具并安装即可。官方地址：u.tools/
2. 新建开发者插件 通过输入"uTools 开发者工具"唤醒开发者工具，新建项目，支持个人和公司认证 出现项目后，则表示项目创建成功了，如下图所示

配置vue 环境（对 vue2.0 和 3.0 无限制）

虽然出现了项目，但是界面上确实很让人琢磨不透，这里给出开发者文档：u.tools/docs/develo… 这里的 plugin.json，文件非常重要，可以根据相关文档自行配置，这里我们主要进行 vue 开发，我们根据 vue项目目录结构来配置,具体结构如下图所示： 值得注意的是 plugin.json中的配置development和 code：

   {
	"main": "index.html",
	"logo": "public/logo.png",
	"features": [
		{
		  "code": "dev",
		  "explain": "hello world",
			"cmds":["shuati", "测试"]
		},
        {
            "code": "dev",
            "explain": "hello world",
              "cmds":["st", "测试"]
          }
	],
    "development": {
        "main": "http://localhost:5173/index.html"
    }
}

当 vite 正常跑起来的时候，一般端口是 5173，当然具体看启动日志，或者代码中配置

调试插件

1. 端口正常启动，可以到浏览器中测试是否可以正常打开
2. 通过唤醒 utool 中新建的项目，并点击运行

3.当出现 helloworld 效果，即证明目前 vue 环境已经搭建完成