【utools】Expérience pertinente dans le projet de plug-in utools de développement vue2 (introduction détaillée du style nounou)

avant-propos

utools est un logiciel très simple d'utilisation.Les outils simples ont grandement amélioré ma productivité, notamment certains plug-ins pour le stockage structuré d'informations. Par conséquent, je souhaite également contribuer au marché des utools et développer un plug-in utools dont j'ai besoin, facile à utiliser, simple et pouvant répondre aux besoins des autres. J'ai donc passé 15 jours à développer une "note de bogue" pour un enregistrement structuré des informations sur les bogues. [2023.1.16 - 2023.1.21].
Au cours de ce processus, j'ai rencontré quelques problèmes liés à l'initialisation de la configuration du projet utools, à la compatibilité de vue2 et du projet utools, ainsi qu'au déploiement et à la publication du projet utools, et il a fallu un certain temps pour les résoudre. Partager cette expérience ici espère aider d'autres petits partenaires qui développent des utools pour la première fois.

PS : Les exigences seront développées sur la base du framework vue2 de nodejs.

Initialiser la configuration du projet utools

0. Téléchargez le plug-in de l'outil de développement officiel utools

1. Initialiser un projet vue2 [pas grand chose à dire]

2. Créez un répertoire dist [le répertoire empaqueté par npm run build, créé à l'avance et créez deux nouveaux fichiers]
2.1 Le fichier plugin.json est le fichier d'initialisation permettant à utools d'accéder à notre propre projet
2.2 Le preload.js est utilisé pour préchargement Chargement, vous ne pouvez pas le traiter temporairement, et j'en reparlerai plus tard

3. Référence de configuration de Plugin.json
Remarques :
(1) Les trois fichiers concernés, index.html, logo.png et preload.js, doivent se trouver dans le même répertoire que plugin.json, c'est-à-dire placés dans le même répertoire que package.json, s'il doit être publié et empaqueté, il doit se trouver dans le fichier de package dist. Utilisé pour l'identification et l'assemblage des utools.
(2) L'entrée principale en développement permet à utools d'accéder à son propre port 8080. Après avoir exécuté le projet frontal, utools peut assembler dynamiquement le projet vue [utiliser avec webpack] (3) La fonction principale des fonctionnalités est de configurer des mots-clés
sur 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笔记"]
		}
	]
}

À ce moment, placez plugin.json, logo.png et preload.js dans le même répertoire que package.json, afin que utools puisse y accéder dynamiquement pendant notre processus de développement [rendu instantané, vous pouvez voir l'effet de développement]

4. C'est la fin de l'initialisation d'un projet. Une fois le développement terminé et l'effet de développement satisfaisant, nous pouvons essayer de regrouper le projet HelloWord dans un npm run buildfichier dist [plugin.json, preload.js et logo.png à l'intérieur ne seront pas être écrasé]
Donnez ensuite plugin.json à utools pour ouvrir votre propre projet.
PS : Le projet vue2 doit faire attention à la configuration du packaging, la configuration du packaging par défaut conduira à une page blanche

• Modifiez la configuration, elle est requise sous dev assetsPublicPath: /, et elle est requise sous build assetsPublicPath: ./.

• npm run build packages a dist project

• trouver plugin.json

• Spécifiez plugin.json dans les outils de développement et lancez l'exécution

• Ouvrez le projet en fonction du mot-clé que vous avez défini.

Vue2 coopère avec utools

Notes de développement

1. utools est livré avec un moteur qui peut analyser le HTML, donc un plug-in utools peut être un projet Web, qui peut être utilisé pour déboguer les outils de développement (F12). Recherchez-le d'abord et déboguez-le après la fenêtre indépendante ctrl + D.

2. Si ElementUI ne peut pas être affiché, modifiez-le simplement ici

3. Pour afficher des images, il est recommandé de les stocker via des actifs

4. Étant donné que plugin.json a écouté le port 8080, le processus de développement est cohérent avec le développement normal. Après l'exécution de npm dev, il sera ouvert directement dans utools.

5. Deux choses à noter : la hauteur de #app affichée par utools est d'environ 540 px, et la largeur peut être ignorée ; la molette de défilement sera couverte par la molette de défilement fournie avec utools, et toute modification apportée à la molette de défilement sera invalide.
PS : La solution 2, c'est-à-dire que l'auto-adaptation est en fait meilleure. Il suffit
d'ajouter des styles html, body {height : 100 % ;} à App.vue

Scénario 2 :

L'API fournie par utools est utilisée

Rappelez-vous le preload.js mentionné ci-dessus, il s'agit d'un fichier de préchargement, nous avons également configuré le point de préchargement dans plugin.json, utools chargera le contenu du script js dans preload.js avant de charger le projet, et utools aussi L'instance utools et l'instance de fenêtre seront montés avant l'exécution de preload.js, et leurs API pourront être utilisées. Pour plus de détails, reportez-vous à la section preload.js dans la documentation officielle.
Documents officiels :https://u.tools/docs/developer/preload.html

Voici la référence de 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);
}

Généralement, la fonction globale est montée via l'instance de fenêtre et l'activité est réalisée à l'intérieur de la fonction (comme les données persistantes et l'ajout, la suppression, la modification et la vérification). Les fonctions globales peuvent être appelées n'importe où dans le fichier vue.

persistance des données

Il peut être utilisé directement dans l'API utools DB du document officiel.
Je préfère utiliser le plus pratique utools.dbStorage.setItem(key, value)et utools.dbStorage.getItem(key), bien sûr, aussi dans la documentation.

Déploiement et publication d'utools

0. Supprimez le fichier .js.map et le fichier .css.map utilisés pour le débogage dans la dist, sinon l'audit ne passera pas

1. Tant que vous pouvez l'ouvrir en mode dev sur l'interface utools, il doit être empaqueté dans un fichier upx.

2. Après avoir fait glisser l'upx emballé dans la boîte utools, il peut être installé dans utools

3. S'il n'y a pas de problème après l'installation, vous pouvez demander une mise sur le marché dans les outils de développement utools

épilogue

Il est difficile de développer un front-end utools, et le traitement du style prendra beaucoup de temps.En ce qui concerne le flux de données, la persistance et le flux de données peuvent être bien réalisés grâce au script js et à l'api pratique fournie par utools. Bien sûr, la chose la plus importante est l'idée.C'est la chose la plus cool de développer un plug-in dont vous avez besoin et dont d'autres pourraient avoir besoin.