【utools】vue2开发utools插件项目相关经验(保姆式详细介绍)
vue2开发utools插件项目相关经验,包含utools配置、vue2配置、数据持久化等的经验介绍。
前言
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可以很好的实现数据的持久化和流转。当然,最重要的还是想法,开发出一个自己需要的,别人可能需要的插件是最酷的。
更多推荐
所有评论(0)