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 surEntrez
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:
Application Global Climate Vue
Obtenez des informations sur les conditions climatiques de n'importe quelle région du monde en un seul clic
Choisissez un sujet
World Population
Boisement
Élévation
Topographie
Végétation
Prevailing Winds
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:
Chargement
Vue par continent
-
Asie
-
Afrique
-
Amérique du Nord
-
Amérique du Sud
-
Australie
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:
Rapport sur le climat pour l'Afrique
Historique du contrôle climatique
980
mb
21
& deg; C
32
%
Contrôle de la température
Temps de travail du conditionneur
-
MON
-
MAR
-
MER
-
JEU
-
FRI
-
SAT
-
SOLEIL
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!
Source link