Créer un composant d'interface utilisateur de contrôle climatique dans Vue.js avec l'interface utilisateur Kendo

Construisons un composant d'interface utilisateur de vue climatique dans Vue.js à l'aide de l'interface utilisateur de Kendo, en complétant l'interface avec des composants de graphique.

Tout d'abord, un peu de contexte.

Qu'est-ce que l'interface utilisateur de Kendo

Interface utilisateur de Kendo ] est un cadre d'interface utilisateur Web complet avec une collection de composants d'interface utilisateur JavaScript avec des bibliothèques pour jQuery et des bibliothèques encore plus modernes comme Vue, React et Angular. Les développeurs d'interface utilisateur de Kendo créent des applications hautes performances interactives et réactives à l'aide d'une grande bibliothèque de widgets d'interface utilisateur et de composants de visualisation de données. de votre choix. Vous gagnez du temps en vous souciant des fonctionnalités clés de l'interface et en vous concentrant plutôt sur les fonctionnalités propriétaires. L'interface utilisateur Kendo est livrée avec la prise en charge de chacun de vos frameworks Web frontaux préférés comme Vue.js avec une intégration facile à utiliser.

Outre les composants d'interface utilisateur de base, Kendo UI vous offre une interface utilisateur avancée de visualisation des données des éléments qui garantissent que vous n'avez pas à ajouter de bibliothèques supplémentaires à votre projet pour gérer les diagrammes et les graphiques. Ces éléments d'interface utilisateur avancés sont également très personnalisables.

Ce que vous allez construire

Vous allez créer un composant d'interface utilisateur de vue climatique dans Vue.js en utilisant Kendo UI. Nous commencerons par l'échafauder avec l'extension de démarrage de l'interface utilisateur Kendo dans VS Code, puis nous utiliserons Vue Router pour créer des itinéraires et enfin utiliser certains composants graphiques de l'interface utilisateur Kendo pour créer l'interface.

Mise en route

Je suppose que vous avez déjà avoir Vue installé; sinon, consultez le guide d'installation . Maintenant, ouvrons votre code VS. La première chose que nous allons faire est d'installer l'extension de l'assistant de modèle d'interface utilisateur Kendo. Vous pouvez le faire en accédant à l'onglet Extensions de VS Code et en recherchant «Kendo UI Template». Allez-y et téléchargez-le, et après avoir redémarré VS Code, vous pouvez maintenant l'utiliser pour créer de nouveaux projets.

Comment utiliser

• Ouvrir VSCode
• Appuyez sur ctrl + shift + p sous Windows / Linux ou ⇧ ⌘ P in Mac pour ouvrir le lanceur d'extension de VSCode
• Tapez / sélectionnez Kendo UI Assistant de modèle: lancez et appuyez sur Entrez pour lancer l'extension

Vous pouvez commencer par choisir un nom de projet et un dossier où il se trouvera. Lorsque vous cliquez sur Suivant, vous êtes invité à choisir la bibliothèque frontale que vous souhaitez utiliser. Kendo UI a des éléments pour Vue, Angular et React.

La ​​prochaine étape consiste à choisir les pages que vous voulez pour votre nouveau projet. Pour ce projet, vous pouvez choisir un graphique avec routage. Une fois que vous avez fait votre choix, l'assistant de modèle exécutera la commande Vue create en arrière-plan et créera une application Vue pour vous.

Configuration

Maintenant que vous en avez terminé avec l'échafaudage de l'application, vous devez vous assurer de toutes les dépendances sont correctement installés en exécutant ces commandes:

 cd  newapp
 npm   install 

Accédez au répertoire racine de la nouvelle application et, dans le fichier main.js, assurez-vous qu'il ressemble exactement à ceci:

 import  Vue  from   ' vue '
 import  App  from  ' ./ App.vue '
 import  router  from   "./ router" ; 
Vue .  config .  productionTip  =   false 
 new   Vue  ( {
  rendu :  h  =>   h  ( App ) 
  routeur
} ) .  $ mount  ( '# app' ) 

Vous pouvez voir que le routage a été introduit dans le projet. Dans le cas où vous n'avez pas utilisé l'assistant de modèle d'interface utilisateur de Kendo ou que vous avez choisi un projet vierge, vous pouvez ajouter du routage facilement avec la commande ci-dessous dans le terminal du projet:

 vue add router

Dans le fichier app.vue remplacez le contenu par le bloc de code ci-dessous:

Le routeur importé a maintenant été importé ici. Si vous ouvrez le dossier du routeur, vous verrez le script du routeur (index.js) où les routes ont été enregistrées. Assurez-vous que le vôtre ressemble à ceci:

 import Vue from "vue";
importer un routeur depuis "vue-router";
import Home de "../components/Home";
importer Chart1 depuis "../components/Chart1";
importer Chart2 depuis "../components/Chart2";
Vue.use (routeur);
exporter un nouveau routeur par défaut ({
  mode: "historique",
  itinéraires: [
    {
      path: "/",
      name: "Home",
      component: Home
    }
    ,{
      path: "/Chart1",
      name: "Chart1",
      component: Chart1
    },{
      path: "/Chart2",
      name: "Chart2",
      component: Chart2
    }
  ]
});

Maintenant, lorsque vous regardez le fichier app.vue vous verrez où ces itinéraires définis sont importés. Pour définir ces itinéraires individuels, accédez au dossier des composants. Vous verrez beaucoup de composants. Supprimez tous les composants en ne laissant que le composant domestique.

Ajout de composants uniques

Votre composant domestique home.vue doit ressembler au bloc de code ci-dessous:

Ajout d'itinéraires cartographiques

Vous pourriez rencontrer des erreurs qui pourraient vous demander les itinéraires que vous avez définis dans le script d'itinéraire. Pour les créer, créez un fichier chart1.vue dans le dossier des composants et copiez à l'intérieur le bloc de code ci-dessous:

Ici, nous utilisons le composant de graphique Kendo UI qui vient avec une animation spéciale car il s'ouvre pour définir les continents en fonction de leur population. Kendo UI s'intègre parfaitement à Vue, et vous pouvez ajouter de nombreuses options dans la fonction de retour Vue d'un composant particulier.

Pour la deuxième route, créez un fichier Chart2.vue dans le dossier des composants et copiez le bloc de code ci-dessous à l'intérieur:

Cette deuxième route utilise le composant Kendo UI Sparkline pour décrire les conditions climatiques. En associant tout, vous pouvez maintenant exécuter l'application sur le serveur de développement avec la commande:

 npm  run serve

Et vous aurez un composant d'interface utilisateur entièrement fonctionnel avec routage et tous les graphiques prédéfinis.

Conclusion

Cet article est une introduction à l'interface utilisateur de Kendo pour Vue.js et comment vous pouvez facilement démarrer un projet Vue à l'aide de l'assistant de modèle d'interface utilisateur Kendo. Il montre également à quel point il est facile d'implémenter le routage Vue et d'intégrer des composants Kendo UI dans vos projets Vue. Bon piratage!