Toujours tendre suite à une mise à jour approximative? Suivez la recette Simple Vue 3!

Dans cette étape, j'avais besoin de trouver le point de départ de l'application Vue et de mettre à jour l'initialisation en fonction des besoins de Vue 3. Le principal changement dans le point de départ de l'application pour Vue 3 est que nous devrions importer la méthode createApp de vue et l'utiliser à la place de la «nouvelle instance de Vue» comme dans la version 2. Dans mon cas, cette logique se trouvait dans le fichier «src / main.js» et voici comment je l'ai modifiée:

Étape 3: Cuire le plat principal

Dans cette étape, nous devons mettre à jour le code des bibliothèques populaires que nous utilisons, comme Vue Router et les composants ou fonctions d'interface utilisateur personnalisés – dans notre cas, c'est Kendo UI pour Vue et heureusement, il fonctionne aussi bien avec la version Vue 3.

Pour le Vu Utilisation d'eRouter, j'avais un fichier «src / router / index.js» où se trouvent tous les paramètres de routage, donc j'avais besoin d'utiliser les nouvelles fonctions createWebHistory et createRoute qui nous aident à définir notre routeur Vue 3:

Étape 4: Test de goût

J'ai recherché dans mon code d'autres utilisations variables de «Vue» qui étaient très populaires dans les scénarios Vue 2, comme la définition globale des composants sur l'instance principale de Vue, qui étaient pas dans la définition principale ou en ajoutant une propriété à un objet réactif en utilisant Vue.set .

Dans mon application, j'avais besoin de les changer et de les remplacer par la syntaxe Vue 3 – les composants peuvent être simplement déplacés au littéral de l'objet composant, la méthode «Vue.set» pourrait être remplacée par une simple réinitialisation de la propriété souhaitée, tandis que la fonction emit pourrait maintenant être importée de 'vue' et utilisé dans la fonction setup :

Étape 5: La sauce spéciale

Cette dernière étape est facultative, mais si vous voulez faire un effort supplémentaire et prouver que vous êtes un maître cuisinier, vous voudrez le faire: passez à la nouvelle Composition API . Si vous ne la connaissez pas, c'est la nouvelle syntaxe prise en charge dans les composants Vue 3 qui offre d'énormes options de flexibilité en vous donnant la possibilité de définir toute votre logique dans une fonction de configuration et d'extraire facilement des morceaux de code réutilisables.

Dans l'ordre pour y accéder, je devais inclure la fonction de configuration et définir les méthodes, les données et les propriétés calculées. Ce n'est pas du tout une tâche difficile;

Voici ci-dessous un changement de l'un de mes composants où nous effectuons les interactions avec les cellules d'édition dans le composant Grid . Le code ci-dessous est raccourci, mais vous pouvez vérifier le code réel en utilisant le Getting Started project de Kendo UI Template Wizard:

Voilà! J'espère que vous êtes toujours réveillé et que vous appréciez votre repas! 😊

Maintenant, le projet utilise Vue 3 avec un code prêt pour 2021. Vous pouvez télécharger l'extension VS Code et l'essayer maintenant! Si votre projet contient du code et des cas plus complexes, je vous recommande également de consulter mon article de blog «Tricky, Tricky — Hidden Migration Tips for Vue 3» ou vous pouvez même me contacter directement via Twitter: @ pa4oZdravkov .

Codage Happy Vue!