Guide du débutant de Vue CLI –

Lors de la création d'une nouvelle application Vue, le meilleur moyen de se mettre rapidement au travail est d'utiliser Vue CLI . Il s'agit d'un utilitaire de ligne de commande qui vous permet de choisir parmi une gamme d'outils de génération, qu'il installera et configurera ensuite pour vous. Votre projet sera également échafaudé, vous fournissant un point de départ préconfiguré sur lequel vous pouvez vous appuyer, plutôt que de tout recommencer à zéro.

La version la plus récente de Vue CLI est la version 3. Elle offre une nouvelle expérience pour Les développeurs de Vue et les aide à commencer à développer des applications Vue sans s’occuper de la configuration complexe d’outils tels que webpack. En même temps, il peut être configuré et étendu avec des plugins pour les cas d'utilisation avancés.

Vue CLI v3 est un système complet pour le développement et le prototypage rapides de Vue.js. Il est composé de différents composants, tels que le service CLI plugins CLI et récemment un interface utilisateur Web qui permet aux développeurs d’exécuter des tâches via une interface conviviale.

Tout au long de cet article, je présenterai la dernière version de Vue CLI et ses nouvelles fonctionnalités. Je vais vous montrer comment installer la dernière version de Vue CLI et comment créer, servir et construire un exemple de projet.

Installation et conditions de Vue CLI v3

Dans cette section, nous allons examiner les conditions requises pour Vue CLI v3 et comment l'installer.

Exigences

Commençons par les exigences. Vue CLI v3 nécessite Node.js 8.9+, mais v8.11.0 + est recommandée.

Vous pouvez installer la dernière version de Node.js de différentes manières:

• En téléchargeant les fichiers binaires de votre système à partir du site officiel .
• En utilisant le gestionnaire de paquets officiel de votre système.
• En utilisant un gestionnaire de versions. C'est probablement le moyen le plus simple, car cela vous permet de gérer plusieurs versions de Node sur le même ordinateur. Si vous souhaitez en savoir plus sur cette approche, consultez notre astuce Installation de plusieurs versions de Node.js à l'aide de nvm .

Le créateur de Vue, Evan You, décrit la version 3 de la CLI une "bête complètement différente" de son prédécesseur. En tant que tel, il est important de désinstaller toute version antérieure de la CLI (c'est-à-dire 2.xx) avant de commencer avec ce tutoriel.

Si le paquet vue-cli est installé globalement sur votre système, pouvez le supprimer en exécutant la commande suivante:

 npm uninstall vue-cli -g

Installation de Vue CLI v3

Vous pouvez maintenant installer Vue CLI v3 en exécutant simplement la commande suivante à partir de votre terminal:

 npm install -g @ vue / cli

Remarque: si vous devez ajouter sudo avant votre commande sous MacOS ou sur les systèmes Debian, ou utiliser une invite de l'administrateur CMD sous Windows pour installer les packages globalement, vous devez résoudre ce problème. vos autorisations. Le site npm contient un guide sur la procédure à suivre ou utilisez simplement un gestionnaire de versions pour éviter le problème complètement.

Après avoir installé avec succès la CLI, vous pourrez accéder à l'exécutable vue dans votre terminal.

Par exemple, vous pouvez répertorier toutes les commandes disponibles en exécutant la commande vue :

 vue

Vous pouvez vérifier la version que vous avez installée en exécutant:

 vue --version
3.2.1 $

Création d'un projet Vue

Après avoir installé Vue CLI, voyons maintenant comment l'utiliser pour échafauder rapidement des projets Vue complets avec un ensemble d'outils frontaux moderne.

Vous pouvez créer ou générer Vue CLI. une nouvelle application Vue en exécutant la commande suivante sur votre terminal:

 vue create example-vue-project

Astuce: example-vue-project est le nom du projet. Vous pouvez évidemment choisir un nom valide pour votre projet.

Le CLI vous demandera le préréglage que vous souhaitez utiliser pour votre projet. Une option consiste à sélectionner le préréglage par défaut qui installe deux plugins: Babel pour la transcription de JavaScript moderne et ESLint pour assurer la qualité du code. Ou vous pouvez sélectionner manuellement les fonctionnalités nécessaires à votre projet à partir d'un ensemble de plugins officiels. Ceux-ci incluent:

Quel que soit votre choix, la CLI téléchargera les bibliothèques appropriées et configurera le projet pour les utiliser. Et si vous choisissez de sélectionner manuellement les fonctionnalités, vous aurez également la possibilité, à la fin des invites, d'enregistrer vos sélections en tant que préréglage afin de pouvoir les réutiliser dans les projets futurs.

Voyons maintenant les autres scripts de service du projet (utilisation d'un serveur de développement Webpack et rechargement de module à chaud) et construction du projet pour la production.

Naviguez dans le dossier de votre projet:

 cd example-vue-project

Ensuite, exécutez la commande suivante pour servir votre projet localement:

 npm run serve

Cette commande vous permettra d'exécuter un serveur de développement local à partir de l'adresse http: // localhost: 8080 . Si vous utilisez votre navigateur Web pour accéder à cette adresse, la page suivante apparaît:

Le serveur de développement prend en charge des fonctionnalités telles que le rechargement à chaud par code, qui signifie vous n'avez pas besoin d'arrêter et de démarrer votre serveur à chaque fois que vous modifiez le code source de votre projet.

Et lorsque vous avez terminé de développer votre projet, vous pouvez utiliser la commande suivante pour créer un lot de production:

 npm run build

Cela va tout exporter dans un dossier dist de votre projet. Vous pouvez en savoir plus sur le déploiement ici .

Qu'est-ce que le service Vue CLI?

Le service Vue CLI est une dépendance d'exécution ( @ vue / cli-service ) qui résume le webpack et fournit les configurations par défaut. Il peut être mis à niveau, configuré et étendu avec des plugins.

Il fournit plusieurs scripts pour travailler avec les projets Vue, tels que le servir le build et le inspecter . scripts.

Nous avons déjà vu les scripts servir et construire déjà en action. Le script inspect vous permet d'inspecter la configuration de Webpack dans un projet avec vue-cli-service . Essayez-le:

 vue inspect

Comme vous pouvez le constater, cela produit beaucoup de résultats. Nous verrons plus tard comment ajuster la configuration du WebPack dans un projet Vue.

The Project Anatomy

Un projet Vue généré avec le CLI a une structure prédéfinie qui respecte les meilleures pratiques. Si vous choisissez d'installer des plug-ins supplémentaires (tels que le routeur Vue), la CLI créera également les fichiers nécessaires à l'utilisation et à la configuration de ces bibliothèques.

Jetons un coup d'œil aux fichiers et dossiers importants d'un projet Vue lorsque vous l'utilisez. le préréglage par défaut.

• public . Ce dossier contient des fichiers publics tels que index.html et favicon.ico . Tous les actifs statiques placés ici seront simplement copiés et ne passeront pas par le WebPack.
• src . Ce dossier contient les fichiers source de votre projet. La plupart des travaux seront effectués ici.
• src / assets . Ce dossier contient les actifs du projet tels que logo.png .
• src / components . Ce dossier contient les composants Vue.
• src / App.vue . C’est l’élément principal du projet Vue.
• src / main.js . Il s'agit du fichier de projet principal qui démarre l'application Vue.
• babel.config.js . C'est un fichier de configuration pour Babel.
• package.json . Ce fichier contient une liste des dépendances du projet, ainsi que les options de configuration pour ESLint, PostCSS et les navigateurs pris en charge.
• node_modules . Ce dossier contient les packages npm installés.

Il s’agit d’une copie de l’anatomie du projet:

Vue CLI Plugins

Vue CLI v3 a été conçue avec une architecture de plugin. Dans cette section, nous verrons ce que sont les plugins et comment les installer dans vos projets. Nous examinerons également certains plugins populaires qui peuvent aider à ajouter des fonctionnalités avancées en installant automatiquement les bibliothèques requises et en définissant divers paramètres, qui devraient tous être définis manuellement.

Qu'est-ce qu'un plug-in Vue?

Les plug-in CLI ne sont que des packages npm qui fournissent des fonctionnalités supplémentaires à votre projet Vue. Le binaire de vue-cli-service est automatiquement résolu et charge tous les plug-in répertoriés dans le fichier package.json .

La configuration de base d'un projet Vue CLI 3 est webpack et Babel. Toutes les autres fonctionnalités peuvent être ajoutées via des plugins.

Il existe des plugins officiels fournis par l'équipe de Vue et des plugins de communauté développés par la communauté. Les noms de plugins officiels commencent par @ vue / cli-plugin- et les noms de plug-in de communauté commencent par vue-cli-plugin- .

Les plugins officiels de Vue CLI 3 incluent: ]

• Typescript
• PWA
• Vuex
• Vue Router
• ESLint
• Unités de test, etc.

Comment ajouter un plug-in Vue

Les plug-ins sont automatiquement installés lors de la création du projet ou explicitement installé ultérieurement par le développeur.

Vous pouvez installer de nombreux plugins intégrés dans un projet lors de l'initialisation de votre projet et installer tout autre plugin supplémentaire dans le projet à l'aide de la commande vue add my-plugin . à tout moment de votre projet.

Vous pouvez également installer des plugins avec des presets et regrouper vos plugins préférés sous forme de presets réutilisables que vous pourrez utiliser plus tard comme base pour d’autres projets.

Certains plugins Vue utiles

. de nombreux plugins Vue CLI que vous pourriez trouver utiles pour vos prochains projets. Par exemple, la bibliothèque Vuetify UI est disponible sous forme de plug-in tout comme Storybook . Vous pouvez également utiliser le plugin Electron Builder pour échafauder rapidement un projet Vue basé sur Electron.

J'ai également écrit quelques plugins dont vous pouvez vous servir:

Si vous ' Pour en savoir plus sur les plugins, consultez cet excellent article sur Vue Mastery: 5 plugins Vue CLI 3 pour votre projet Vue .

Qu'en est-il du webpack?

le webpack est extrait par le Vue CLI et les différentes API qu'elle fournit pour accéder à la configuration du Webpack et la muter.

La plupart des configurations de projet de Vue CLI sont résumées dans des plug-ins et sont fusionnées dans la configuration de base au moment de l'exécution. Mais dans certaines situations, vous pouvez modifier manuellement la configuration de WebPack pour votre projet. Dans ce cas, vous pouvez soit:

• Créez un fichier vue.config.js dans la racine de votre projet, puis définissez toute configuration dans une option configureWebpack :

     module.exports = {
      configureWebpack: {
        // config personnalisée ici
      }
    }
   

• Modifiez la configuration du pack Web en utilisant des outils tels que webpack-chain

Pour en savoir plus sur sur l'utilisation de Vue CLI et du Webpack ici .

Vue CLI UI [19659006] Voyons maintenant l’UI Vue CLI qui explique comment le lancer et les différentes vues utilisées pour créer et gérer des projets avec une interface utilisateur graphique.

Vue CLI v3 fournit une interface Web moderne qui vous permet créer et gérer des projets sans utiliser les commandes du terminal. Vous pouvez lancer l’UI comme suit:

 vue ui

L'interface utilisateur doit être disponible à l'adresse http: // localhost: 8000 .

Vous créez un nouveau projet à partir du Onglet Créer . Recherchez l'emplacement où vous souhaitez créer votre projet, puis cliquez sur le bouton + Créer un nouveau projet ici .

dirigez-vous vers une nouvelle interface dans laquelle vous devez entrer différents détails sur votre projet, tels que le nom, l'emplacement du projet, le gestionnaire de paquets et si vous souhaitez ou non initialiser un référentiel Git.

Entrez les détails et cliquez sur le bouton Suivant . Vous serez redirigé vers l'onglet Paramètres prédéfinis dans lequel vous pouvez spécifier le paramètre prédéfini pour votre projet.

Vous pouvez choisir:

• Le paramètre prédéfini par défaut avec Babel et Plug-ins ESLint
• Manuel pour la sélection manuelle des plug-ins
• Préréglage distant pour l'utilisation d'un préréglage distant à partir d'un référentiel Git

Continuons avec le préréglage par défaut:

.

Conseil: un préréglage est une association de plugins et de configurations.

Cliquez ensuite sur le bouton Create Project pour démarrer. générer votre projet. Vous serez redirigé vers une nouvelle interface qui vous montrera la progression de la génération de votre projet.

Vous serez ensuite dirigé vers le tableau de bord du projet, où vous pourrez placer des widgets que vous pourrez ajouter à l'aide de l'option Personnaliser. en haut à droite de la page, après quoi ils seront automatiquement sauvegardés

Vous trouverez à la gauche du tableau de bord différentes pages:

• Plugins pour l'ajout de nouveaux plugins Vue CLI
• Dépendances pour la gestion des paquets
• Configuration pour la configuration des outils
• Tâches ] pour exécuter les scripts

Basculer vers la page Tâches .

Cliquez ensuite sur le bouton servir puis sur Bouton Exécuter la tâche pour servir votre projet.

Vous pouvez arrêter de servir Le projet utilise le bouton Stop task . Vous pouvez également ouvrir l'application à partir de cette interface et afficher des informations sur le projet, telles que la taille des actifs, des modules et des dépendances, des statistiques de vitesse, etc.

Conclusion

article, nous avons vu un aperçu de la nouvelle version de Vue CLI, qui fournit toute une série de fonctionnalités destinées aux développeurs, telles qu'un échafaudage de projet interactif, une riche collection de plug-ins officiels intégrant les meilleurs outils de l'écosystème frontal, ainsi qu'une interface graphique complète. interface utilisateur pour créer et gérer des projets Vue.js.

Le CLI est un outil puissant à la portée des développeurs de Vue, mais dans les cas où vous n’avez pas besoin de toutes ses fonctionnalités, il peut être préférable d’utiliser Vue.js. dans votre projet sans la CLI. Vous pouvez voir comment faire cela dans notre tutoriel Comment démarrer avec le framework Vue.js 2.0 .

Ahmed est un entrepreneur, développeur, web marketing et blogueur Web. Il écrit sur le développement de logiciels et de sites Web, des astuces pour gagner de l'argent, le référencement, etc. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .