Suivez le processus d'intégration de la nouvelle Vue CLI 3 avec Kendo UI et commencez à développer des applications Vue.js accrocheuses sans souci!
Kendo UI est une bibliothèque de composants d'interface utilisateur impressionnante créée par . ] Progrès . Il peut être utilisé avec plusieurs frameworks / outils (jQuery, React, Angular), mais parlons de l’utilisation de avec Vue.js .
Nous allons expliquer le processus d’intégration étape par étape et résoudre quelques problèmes pouvant survenir lors de l'intégration de Kendo UI à Vue CLI 3. Pour cela, nous allons utiliser notre application "Vuetiful" de Rick & Morty ( https://ricknmortyvue.surge.sh ). à titre d'exemple.
Pour ceux qui n'ont pas encore mis à jour Vue CLI 3, vous pouvez consulter ce billet de blog sur ce que vous devez savoir et je vous recommande de lire la documentation officielle pour apprendre le bon usage de cet outil génial
En supposant que nous ayons déjà installé Vue CLI 3, créons notre projet et entrons dans son dossier racine:
vue create ricknmorty-vue [19659003] cd / ricknmorty-vue
Installez Kendo UI à l’aide de npm
Installation:
npm install --save @ progress / kendo-ui
npm installer --save @ progress / kendo-theme-default
Pour notre application, nous avons utilisé le thème par défaut, mais parmi les nombreuses possibilités de faire basculer vos applications et ressemblant à un million de dollars, vous pouvez créer votre propre thème, ou utiliser le thème par défaut, bootstrap ou matériel. (Consultez le Thème Builder !)
Par exemple, pour notre Vuetiful Rick & Morty, nous avons utilisé des boutons:
npm install --save @ progress / kendo-buttons-vue- wrapper
Vous pouvez vous rendre sur le site Kendo UI pour Vue pour plus de détails sur les thèmes et les composants .
Une fois tous les packages nécessaires installés, nous allons procéder à l'intégration:
- Open main.js
- Importons notre magie en ajoutant ce qui suit dans notre code:
import '@ progress / kendo-ui'
import '@ progress / kendo-theme-default / dist / all.css '
Ajoutez le pack de base minimum à notre projet et, dans ce cas particulier, ajoutez des boutons: