【utools】Relevant experience in vue2 development utools plug-in project (detailed introduction of nanny style)

foreword

utools is a very easy-to-use software. The simple tools have greatly improved my productivity, especially some plug-ins for structured storage of information. Therefore, I also want to contribute to the utools market and develop a utools plug-in that I need, is easy to use, simple, and may meet the needs of others. So I spent 15 days developing a "bug note" for structured recording of bug information. [2023.1.16 - 2023.1.21].
During this process, I encountered some problems related to the initialization of the utools project configuration, the compatibility of vue2 and the utools project, and the deployment and release of the utools project, and it took a certain amount of time to solve them. Sharing this experience here hopes to help other small partners who are developing utools for the first time.

PS: The requirements will be developed based on the vue2 framework of nodejs.

Initialize utools project configuration

0. Download utools official developer tool plugin

1. Initialize a vue2 project [not much to tell]

2. Create a dist directory [the directory packaged by npm run build, created in advance, and create two new files]
2.1 The plugin.json file is the initialization file for utools to access our own project
2.2 The preload.js is used for preloading Loading, you can not process it temporarily, and I will talk about it later

3. Plugin.json configuration reference
Notes:
(1) The three files involved, index.html, logo.png, and preload.js, should be in the same directory as plugin.json, that is, placed in the same directory as package.json, If it is to be released and packaged, it must be in the dist package file. Used for utools identification and assembly.
(2) The main entry in development allows utools to access its own port 8080. After running the front-end project, utools can dynamically assemble the vue project [use with webpack] (3) The main function of features is to
configure keywords on 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笔记"]
		}
	]
}

At this time, put plugin.json, logo.png, and preload.js in the same directory as package.json, so that utools can dynamically access it during our development process [instant rendering, you can see the development effect]

4. This is the end of initializing a project. After the development is completed and the development effect is satisfactory, we can try to package the HelloWord project into a npm run builddist file [plugin.json, preload.js and logo.png inside will not be overwritten]
Then give plugin.json to utools to open your own project.
PS: The vue2 project must pay attention to the packaging configuration, the default packaging configuration will lead to a blank page

• Modify the configuration, it is required under dev assetsPublicPath: /, and it is required under build assetsPublicPath: ./.

• npm run build packages a dist project

• find plugin.json

• Specify plugin.json in developer tools and start running

• Open the project according to the keyword you set.

Vue2 cooperates with utools

Development Notes

1. utools comes with an engine that can parse HTML, so a utools plug-in can be a web project, which can be used to debug developer tools (F12). Search it out first, and debug it after ctrl+D independent window.

2. If ElementUI cannot be displayed, just modify it here

3. To display pictures, it is recommended to store them through assets

4. Because plugin.json has listened to port 8080, the development process is consistent with normal development. After npm run dev, it will be opened directly in utools.

5. Two things worth mentioning: #app height displayed by utools is about 540px, and width can be ignored; the scroll wheel will be covered by the scroll wheel that comes with utools, and any modification to the scroll wheel will be invalid.
PS: Solution 2, that is, self-adaptation is actually better. Just
add html, body {height: 100%;} styles to App.vue

Scenario 2:

The API provided by utools is used

Remember the preload.js mentioned above, this is a preload file, we also configured the preload point in plugin.json, utools will load the js script content in preload.js before loading the project, and utools also The utools instance and window instance will be mounted before preload.js is executed, and their APIs can be used. For details, refer to the preload.js section in the official documentation.
Official documentation:https://u.tools/docs/developer/preload.html

Here is the reference of 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);
}

Generally, the global function is mounted through the window instance, and the business is realized inside the function (such as persistent data and adding, deleting, modifying and checking). Global functions can be called anywhere in the vue file.

data persistence

It can be used directly in the utools DB API of the official document.
I prefer to use the more convenient utools.dbStorage.setItem(key, value)and utools.dbStorage.getItem(key), of course, also in the documentation.

Deployment and release of utools

0. Delete the .js.map file and .css.map file used for debugging in the dist, otherwise the audit will not pass

1. As long as you can open it in dev mode on the utools interface, then it must be packaged into an upx file.

2. After dragging the packaged upx to the utools box, it can be installed in utools

3. If there is no problem after installation, you can apply for release to the market in the utools developer tools

epilogue

It is troublesome to develop a utools front-end, and style processing will take a lot of time. As for data flow, data persistence and transfer can be well realized through js scripts and the convenient api provided by utools. Of course, the most important thing is the idea. It is the coolest thing to develop a plug-in that you need and that others may need.