La CLI Vue.js: apprenez à l'utiliser

Vue est un projet très impressionnant, et en plus du cœur du framework, il maintient de nombreux utilitaires qui facilitent la vie d'un programmeur Vue. L'un d'eux est la CLI Vue.

Vue est un projet très impressionnant, et en plus du cœur du framework, il maintient de nombreux utilitaires qui facilitent la vie d'un programmeur Vue.

L'un d'eux est la CLI Vue.

CLI signifie Interface de ligne de commande.

Remarque: Il y a une énorme refonte de la CLI en ce moment, passant de la version 2 à 3. Bien que n'étant pas encore stable, je décrirai la version 3 car c'est une énorme amélioration par rapport à la version 2, et tout à fait différente.

Installation

La CLI Vue est un utilitaire de ligne de commande, et vous l'installez globalement en utilisant npm:

npm install -g @vue/cli

ou en utilisant du fil:

yarn global add @vue/cli

Une fois que vous le faites, vous pouvez invoquer levuecommander.

Que fournit la CLI Vue?

La CLI est essentielle pour le développement rapide de Vue.js.

Son objectif principal est de s'assurer que tous les outils dont vous avez besoin fonctionnent ensemble, de faire ce dont vous avez besoin et de faire abstraction de tous les détails de configuration essentiels que l'utilisation de chaque outil de manière isolée nécessiterait.

Il peut effectuer une configuration initiale de projet et un échafaudage.

C'est un outil flexible: une fois que vous créez un projet avec la CLI, vous pouvez aller peaufiner la configuration, sans avoir àéjectervotre application (comme vous le feriez aveccreate-react-app).

Lorsque vous éjectez de create-react-app, vous pouvez mettre à jour et modifier ce que vous voulez, mais vous ne pouvez pas vous fier aux fonctionnalités intéressantes fournies par create-react-app.

Vous pouvez tout configurer et toujours pouvoir effectuer une mise à niveau facilement.

Une fois que vous avez créé et configuré l'application, elle agit comme un outil de dépendance d'exécution, construit au-dessus de webpack.

La première rencontre avec la CLI a lieu lors de la création d'un nouveau projet Vue.

Comment utiliser la CLI pour créer un nouveau projet Vue

La première chose que vous allez faire avec la CLI est de créer une application Vue:

vue create example

Ce qui est cool, c'est que c'est un processus interactif. Vous devez choisir un préréglage. Par défaut, il existe un préréglage qui fournit l'intégration Babel et ESLint:

Je vais appuyer sur la flèche vers le bas ⬇️ et choisir manuellement les fonctionnalités que je veux:

pressespacepour activer l'un des éléments dont vous avez besoin, puis appuyez surentercontinuer. Depuis que j'ai choisi un linter / formatter, Vue CLI me demande la configuration. J'ai choisi ESLint + Prettier car c'est ma configuration préférée:

La prochaine chose à faire est de choisir comment appliquer le peluchage. je choisispeluches lors de l'enregistrement.

Prochaine étape: les tests. J'ai choisi les tests et Vue CLI me propose de choisir entre les deux solutions les plus populaires: Mocha + Chai vs Jest.

Vue CLI me demande où mettre toute la configuration: si dans lepackage.jsonfichier, ou dans des fichiers de configuration dédiés, un pour chaque outil. J'ai choisi ce dernier.

Ensuite, Vue CLI me demande si je souhaite enregistrer ces préréglages et me permet de les choisir la prochaine fois que j'utiliserai Vue CLI pour créer une nouvelle application. C'est une fonctionnalité très pratique, car avoir une configuration rapide avec toutes mes préférences est un soulagement de la complexité:

Vue CLI me demande alors si je préfère utiliser Yarn ou npm:

et c'est la dernière chose qu'il me demande, puis il télécharge les dépendances et crée l'application Vue:

Comment démarrer la nouvelle application Vue CLI

Vue CLI a créé l'application pour nous, et nous pouvons aller dans leexampledossier et exécutezyarn servepour démarrer notre première application en mode développement:

La source d'application de l'exemple de démarrage contient quelques fichiers, notammentpackage.json:

C'est là que toutes les commandes CLI sont définies, y comprisyarn serve, que nous avons utilisé il y a une minute. Les autres commandes sont

  • yarn build, pour démarrer une version de production
  • yarn lint, pour exécuter le linter
  • yarn test:unit, pour exécuter les tests unitaires

Je décrirai l'exemple d'application généré par Vue CLI dans un didacticiel séparé.

Dépôt Git

Remarquez lemastermot dans le coin inférieur gauche de VS Code? C'est parce que Vue CLI crée automatiquement un référentiel et effectue le premier commit, afin que nous puissions intervenir directement, changer les choses et nous savons ce que nous avons changé:

C'est plutôt cool. Combien de fois vous plongez et changez les choses, pour vous rendre compte que lorsque vous voulez valider le résultat, vous n'avez pas validé l'état initial?

Utiliser un préréglage à partir de la ligne de commande

Vous pouvez ignorer le panneau interactif et demander à Vue CLI d'utiliser un préréglage particulier:

vue create -p favourite example-2

Où sont stockés les préréglages

Les préréglages sont stockés dans le.vuejsfichier dans votre répertoire personnel. Voici le mien après avoir créé le premier préréglage «favori»

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

Plugins

Comme vous pouvez le voir en lisant la configuration, un préréglage est essentiellement une collection de plugins, avec une configuration facultative.

Une fois qu'un projet est créé, vous pouvez ajouter d'autres plugins en utilisantvue add:

vue add @vue/cli-plugin-babel

Tous ces plugins sont utilisés dans la dernière version disponible. Vous pouvez forcer Vue CLI à utiliser une version spécifique en passant la propriété version:

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

ceci est utile si une nouvelle version a un changement de rupture ou un bogue et que vous devez attendre un peu avant de l'utiliser.

Stocker à distance les préréglages

Un préréglage peut être stocké dans GitHub (ou sur d'autres services) en créant un référentiel contenant unpreset.jsonfichier, qui contient une seule configuration prédéfinie. Extrait de ce qui précède, j'ai fait un échantillon prédéfini danshttps://github.com/flaviocopes/vue-cli-preset/blob/master/preset.jsonqui contient cette configuration:

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier",
      "lintOn": [
        "save"
      ]
    },
    "@vue/cli-plugin-unit-jest": {}
  },
  "router": true,
  "vuex": true
}

Il peut être utilisé pour amorcer une nouvelle application en utilisant:

vue create --preset flaviocopes/vue-cli-preset example3

Autre utilisation de la CLI Vue: le prototypage rapide

Jusqu'à présent, j'ai expliqué comment utiliser la CLI Vue pour créer un nouveau projet à partir de zéro, avec toutes les cloches et sifflets. Mais pour un prototypage très rapide, vous pouvez créer une application Vue très simple, même une application autonome dans un seul fichier .vue, et la servir, sans avoir à télécharger toutes les dépendances dans lenode_modulesdossier.

Comment? Installez d'abord lecli-service-globalpackage global:

npm install -g @vue/cli-service-global

//or


yarn global add @vue/cli-service-global

Créez un fichier app.vue:

<template>
    <div>
        <h2>Hello world!</h2>
        <marquee>Heyyy</marquee>
    </div>
</template>

puis exécutez

vue serve app.vue
The standalone app


You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses main.js / index.js  as its entry point, and you can have a package.json and any tool configuration set up. vue serve will pick it up.


Since this uses global dependencies, it’s not an optimal approach for anything more than demonstration or quick testing.


Running vue build will prepare the project for deployment in dist/, and generate all the corresponding code, also for vendor dependencies.


Webpack


Internally, Vue CLI uses webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still have access to it by calling vue inspect:



  

  
Download my free Vue Handbook

  




More vue tutorials:

Tech Wiki en ligne!