Un premier regard sur la Vue CLI

La première fois que j'ai entendu des personnes et des articles parler d'un CLI pour Vue, je me suis senti très dépassé par le simple concept de celui-ci. Ouvrons ensemble un didacticiel pas à pas pour préparer la CLI et l'installer sur votre ordinateur. Nous vous présenterons ensuite votre première application Vue CLI 3 et une rapide exploration de sa structure.

J'ai récemment terminé une série de tutoriels pour débutants pour Vue.JS (auto-promotion sans vergogne. , désolé), dans lequel nous avons passé en revue tous les principes de base du fonctionnement de Vue .

Cependant, nous n’avons examiné que Vue du point de vue de l’ajout d’un tag en fichier HTML statique et en le configurant directement dans la page

Il est temps de passer aux outils pour grandes filles et de regarder l’un des aspects les plus agréables du travail avec Vue - les CLI (interface de ligne de commande).

Ne craignez rien, c'est très facile!

Malheureusement, pour ce didacticiel, je vais devoir supposer que vous avez quelques connaissances en matière de navigation à l'intérieur du terminal avec les bases cd car c’est une façon hors de portée de ce que Vue CLI est ou fait. La commande cd est super basique et vous pouvez facilement utiliser Google pour une vidéo ou un didacticiel rapide si vous avez besoin d'un rappel.

Préparation de la configuration

Nous avons besoin de quelques éléments à obtenir. configurer sur votre ordinateur avant de commencer. N'hésitez pas à en sauter quelques-unes si vous les avez déjà, mais veillez à ne pas sauter un élément essentiel.

NodeJS

Pour que la CLI fonctionne sur notre système, nous allons pour installer Node en premier, en particulier au moment de l’écriture, il faut au moins la version 8.9 mais 8.11+ est recommandée.

Si vous avez déjà installé Node avant , mais vous ne savez pas quelle version vous utilisez, ouvrez votre terminal et exécutez la commande node -v . Vous devriez obtenir une sortie telle que v11.9.0 . Si vous obtenez une erreur, vous n'avez probablement pas installé le nœud sur votre machine.

Allez à la page officielle du nœud https://nodejs.org/fr/ et sur la page d'accueil que vous avez sélectionnée. Vois deux boutons verts pour le téléchargement. Allez-y et cliquez sur la version LTS (support technique à long terme), à ​​moins que vous ne sachiez ce que vous faites et que vous souhaitiez obtenir la dernière version.

Vous obtiendrez un téléchargement pour votre système d'exploitation actuel. Double-cliquez dessus et passez par l'assistant d'installation. Une fois que vous avez terminé, relancez le terminal et essayez de lancer une nouvelle fois le noeud -v pour vérifier que tout fonctionne.

Une dernière chose. Lors de l'installation de Node, vous obtenez également npm (Node Package Manager) installé sur votre ordinateur gratuitement! Nous allons utiliser cela plus tard, alors gardez cela à l'esprit au cas où vous vous demandez d'où cela vient.

Fil (facultatif)

Certaines personnes préfèrent utiliser le fil par rapport à . ] npm comme choix de gestionnaire de paquets. Personnellement, je n’ai pas de préférence et j’utiliserai les deux en fonction du projet et des exigences de l’équipe - mais si vous voulez vous lancer, allez-y simplement https://yarnpkg.com/en/ et cliquez sur le bouton Install Yarn .

Encore une fois, téléchargez le fichier et suivez les instructions de l'assistant d'installation. Une fois terminé, vous pouvez vérifier que le fil a été correctement ajouté à votre machine en exécutant le fil -v sur votre terminal.

Installation de la CLI

Sweet! Maintenant que nous avons tout ce dont nous avons besoin, nous pouvons installer et installer le Vue CLI sur notre ordinateur.

Ouvrez votre terminal et exécutez la commande suivante. (Notez que je vais afficher les commandes NPM et Yarn. Vous n'êtes pas obligé de les exécuter toutes les deux. Choisissez celle que vous souhaitez utiliser et que vous avez installée dans la section précédente.)

 npm [19659023] installez  -g @ vue / cli

fil global add @ vue / cli

Lorsque vous exécutez cette commande dans votre terminal, une poignée de scripts sera exécutée et vous obtiendrez une sortie très cryptée. Ne vous inquiétez pas pour ça. Allez vous chercher un café et attendez que tout soit installé.

Notez les drapeaux -g et global sur ces deux commandes. Cela signifie que vous installez ce paquet globalement sur votre ordinateur. En bref, cela signifie que vous pourrez utiliser les commandes n'importe où dans votre système de fichiers, sans avoir à naviguer dans un dossier spécifique.

Une fois de plus, vérifions que tout a été correctement installé en exécutant vue - version sur le terminal, vous devriez obtenir la sortie avec le numéro de version de la CLI.

Création de notre premier projet

Il est temps de nous salir les mains et d’utiliser réellement cette chose. Lancez votre terminal si vous ne l'avez pas déjà fait et accédez au dossier dans lequel vous voulez créer votre projet.

La commande que vous voulez exécuter maintenant est vue create où [19659030] est le nom de votre projet - et également le dossier qui sera créé.

Créons notre premier projet puis en exécutant:

 vue create avocats

Vous allez vous faire poser toute une série de questions qui vous aideront à configurer votre projet, mais ne paniquez pas - elles sont toutes très explicites.

Le premier écran vous permettra soit de sélectionner une configuration par défaut (ce qui est correct pour les débutants), soit de sélectionner manuellement vos options dans l'option de configuration manuelle.

Ne vous inquiétez pas si vous n'avez pas sélectionné d'option telle que, par exemple, Vuex dans la configuration de votre projet - il est toujours possible de les réinstaller ultérieurement à tout moment, en plus de votre projet.

Si vous choisissez une configuration manuelle, vous allez l'exécuter. un assistant d'options qui configurera les options pour votre projet. Vous pouvez y naviguer avec les touches fléchées, sélectionner et désélectionner les options avec la barre d'espacement et passer à l'écran suivant avec la touche Entrée.

Vous pouvez faire des choix ici, comme l'ajout du support TypeScript, la configuration de base du routeur ou même Vuex. pour la gestion globale des états.

Une fois que vous avez terminé, la CLI fera son travail et, au bout de quelques secondes, votre tout nouveau projet sera prêt. Allez-y et cd dedans - et regardons ensemble la structure des dossiers.

La structure des dossiers

Très bien! Je vais ouvrir ce nouveau projet dans VS Code et utiliser le thème Material Icon pour rendre les icônes jolies, au cas où vous vous le demanderiez.

"scripts" : { "serve" : "service-vue-service" "construction" : "vue-service-construction" "charpie" : "peluche de vue-service" }

Sur le côté gauche, vous obtenez le nom du script et sur le côté droit de la paire clé: valeur, vous obtiendrez ce que ce script fait réellement pour vous.

Comment les utiliser? En fait, c’est très simple.

Si vous utilisez npm, vous devez taper dans votre terminal npm run par exemple npm run serve . Si vous utilisez Yarn, vous devez taper service de fil .

Serve and Build

Vous utiliserez deux scripts principaux lors de l’utilisation de Vue CLI. L'un est sert et l'autre est construit .

Allez-y, lancez npm run serve ou filé sur votre terminal (vous devez être sur le répertoire du projet), et lui donner quelques secondes pour effectuer sa magie. Il va compiler et regrouper tous vos actifs actuels et enfin cracher cette légende.

Bonus

Vue CLI a en fait une interface graphique.

Allez à la racine de votre projet dans le terminal, exécutez la commande vue ui et préparez-vous à être émerveillée. Vous obtiendrez une interface graphique complète pour les applications Web qui vous permettra de visualiser / supprimer / installer des plugins, de vérifier vos dépendances, de jouer avec la configuration de votre projet et même d’exécuter les scripts que vous avez appris plus tôt!

Conclusion

et en utilisant le Vue CLI est un must pour tout développeur qui souhaite utiliser Vue pour créer des SPA. Je sais que le terminal peut être un nouveau monde sombre et effrayant pour les débutants, mais je vous promets que, une fois ces étapes franchies, il deviendra de moins en moins difficile à utiliser. (Et si tout le reste échoue, vous avez une interface utilisateur Web pour vous sauvegarder!)

Keep Reading

Pour en savoir plus sur l'utilisation de la CLI Vue dans vos projets, consultez les articles suivants du blog: [19659093] Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'applications Web exceptionnelles? Tout commence avec Kendo UI - la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tout ce dont vous avez besoin pour construire dans Vue, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement Kendo UI