【utools】vue2开发utools插件项目相关经验(保姆式详细介绍)

前言

utools是一个非常好用的软件,简易的各种工具对于我的生产力有很大提升,特别是一些用于结构化收纳信息的插件。因此我也想为utools市场贡献自己一份力,开发一个自己需要的,好用的,简易的,可能能满足别人需求的utools插件。于是本人耗时15天开发了一个用于结构化记录bug信息的“虫子笔记”。【2023.1.16 - 2023.1.21】。
此过程中遇到一些关于初始化utools项目配置、vue2与utools项目兼容配合与utools项目的部署和发布相关的问题,花费了一定时间去解决。在此分享这份经验希望能帮助到其他第一次进行utools开发的小伙伴。

PS: 要求会基于nodejs的vue2框架开发。

初始化utools项目配置

0.下载utools官方的开发者工具插件

在这里插入图片描述

1.初始化一个vue2项目【不多讲述】

在这里插入图片描述

2.创建一个dist目录【npm run build打包后的目录,提前创建,并新建两个文件】
2.1 plugin.json文件是用于utools接入我们自己的项目的初始化文件
2.2 preload.js是用于预加载,可以暂时不处理,下面再讲

在这里插入图片描述

3.plugin.json配置参考
注意事项:
(1)涉及到的index.html、logo.png、preload.js三个文件要和plugin.json在统一目录,即放在与package.json同级目录,如果是要发布打包则要在dist打包文件里。用于utools识别与装配。
(2)development中的main入口可以让utools访问自己的8080端口,在run前端项目后utools能够动态装配vue项目【配合webpack使用】
(3)features主要作用是在utools上配置关键字。

{
    
    
	"main": "index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"platform": ["win32", "darwin", "linux"],
	"development": {
    
    
		"main":"http://127.0.0.1:8080"
	},
	"features": [
		{
    
    
			"code": "bugCollection",
			"explain": "个人的异常错误收集仓库",
			"cmds":["错误笔记", "虫子笔记", "异常笔记", "bug笔记"]
		}
	]
}

这时候把plugin.json、logo.png、preload.js都放到与package.json同级目录下,方便我们开发过程中utools能够动态访问【即时渲染,可以看开发效果】
在这里插入图片描述在这里插入图片描述

4.到此初始化一个项目就完毕了,在完成开发并且开发效果如意后,我们可以尝试对HelloWord项目进行npm run build打包成dist文件【里面的plugin.json、preload.js和logo.png不会被覆盖】
然后把plugin.json交给utools,即可打开自己的项目了。
PS: vue2项目一定要注意打包配置,默认的打包配置会导致空白页面

  • 修改配置,dev下要求assetsPublicPath: /, build下要求assetsPublicPath: ./

在这里插入图片描述在这里插入图片描述

  • npm run build 打包出一个dist项目

在这里插入图片描述

  • 找到plugin.json

在这里插入图片描述

  • 在开发者工具中指定plugin.json并开始运行

开启运行

  • 根据自己设置的关键字打开项目。

在这里插入图片描述

vue2与utools配合

开发注意事项

1.utools自带能解析HTML的引擎,所以一个utools插件可以就是一个网页项目,可以进行开发者工具的调试(F12)。先搜出来,ctrl+D独立窗口后即可调试。

在这里插入图片描述

2.若ElementUI无法展示,修改此处即可

在这里插入图片描述

3.若要展示图片,建议通过assets存储

在这里插入图片描述

4.因为plugin.json已经监听了8080端口,开发过程就和正常开发一致,npm run dev后就直接在utools打开。

5.两个值得说的注意事项:utools展示的#app高度height大概是540px,width可以不管;滚动轮会被utools自带的滚动轮覆盖,任何对滚动轮的修改失效。
PS: 方案二,即自适应其实会更好
在App.vue中加入 html,body {height: 100%;}样式即可

在这里插入图片描述
方案2:
在这里插入图片描述

utools提供的API使用

还记得上方提到的preload.js吗,这是一个预加载文件,我们在plugin.json中也配置了preload的指向,utools会在加载项目前加载preload.js中的js脚本内容,同时utools也会在preload.js执行前挂载utools实例与window实例,可以使用他们的API。详细参考官方文档中的preload.js部分。
官方文档:https://u.tools/docs/developer/preload.html

这里提供preload.js的参考:

window.test = function() {
    
    
	//utools实例可以直接使用
    utools.db.put({
    
    
        id: "demo",
        data: "demo"
    });
    const demo = utools.db.get("demo");
    console.log(demo);
    const tmp = utools.db.put({
    
    
        _id: "demo",
        data: "demo"
    });
    console.log(tmp);
}

一般都是通过window实例挂载全局函数,在函数内部实现业务(比如持久化数据与增删改查)。全局函数可以在vue文件的任意地方被调用。
在这里插入图片描述

数据持久化

官方文档的utools DB API中可以直接使用。
我比较倾向使用更加方便的utools.dbStorage.setItem(key, value)utools.dbStorage.getItem(key),当然文档中也有。
在这里插入图片描述

utools的部署和发布

0.删掉dist中用于调试的.js.map文件和.css.map文件,否则审核不通过

在这里插入图片描述在这里插入图片描述

1.只要你能在utools界面以dev方式打开,那么就一定能打包成upx文件。

在这里插入图片描述

2.打包好的upx拖拽到utools框后才能在utools中安装

在这里插入图片描述
在这里插入图片描述

3.若安装后没问题,则可以在utools开发者工具中申请发布到市场了

在这里插入图片描述

结语

开发一个utools要求前端比较麻烦吧,样式处理会花比较多的时间,至于数据流,通过js脚本和便捷的utools提供的api可以很好的实现数据的持久化和流转。当然,最重要的还是想法,开发出一个自己需要的,别人可能需要的插件是最酷的。

猜你喜欢

转载自blog.csdn.net/NineWaited/article/details/128743279