Vue CLI 3

Le nouvel utilitaire de développement pour Vue.js vient de sortir sa troisième version. À l'instar d'Angular CLI pour Angular et Spring Initializr pour Spring Boot, Vue CLI (pour Command Line Interface) permet de générer des applications Vue.js. Ce client a été entièrement réécrit par rapport à sa version précédente.

À travers cet article, je vais vous présenter quelques unes de ses fonctionnalités, pour en savoir davantage, l'excellente documentation de Vue CLI sera votre meilleure alliée.

Ça s'installe comment ?

Le client s'installe comme une commande système avec votre gestionnaire de dépendances Node.js préféré :

  • npm :
    npm install -g @vue/cli
    
  • Yarn :
    yarn global add @vue/cli
    

Comment s'en servir ?

Il suffit de lancer la commande vue pour avoir le résultat suivant :

$ vue

  Usage: vue <command> [options]

  Options:

    -V, --version                         output the version number
    -h, --help                            output usage information

  Commands:

    create [options] <app-name>           create a new project powered by vue-cli-service
    add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
    invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
    inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
    serve [options] [entry]               serve a .js or .vue file in development mode with zero config
    build [options] [entry]               build a .js or .vue file in production mode with zero config
    ui [options]                          start and open the vue-cli ui
    init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)
    config [options] [value]              inspect and modify the config


  Run vue <command> --help for detailed usage of given command.

Créer

Ensuite, la commande vue create, avec en argument un nom, permet de créer un projet Vue.js.

Je génère ici le projet via la console, il est tout à fait possible de le générer graphiquement, on verra plus tard quelques opérations graphiques via vue ui dans la suite de cet article.

La console va maintenant devenir interactive, voici les 9 étapes de vue create sur une base TypeScript et des tests Jest :

  1. Le choix d'une présélection (plus tard, nous pourrons enregistrer d'autres présélections).
? Please pick a preset:
  default (babel, eslint) 
❯ Manually select features 
  1. Avec la sélection manuelle, nous avons le choix des fonctionnalités souhaitées, dans mon cas, je sélectionne les options suivantes :
? Check the features needed for your project: 
❯◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◉ E2E Testing
  1. Le mode class-style permet d'avoir une syntaxe kebab-case sur nos composants vue.
? Use class-style component syntax? (Y/n)
  1. Cette option permet de traiter via Babel le code généré par le transpileur TypeScript.
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)
  1. Le choix d'un linter comme TSLint permet de vérifier la syntaxe de nos fichiers TypeScript :
? Pick a linter / formatter config:
❯ TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier
  1. Je préfère prendre à la fois Lint on save et Lint and fix on commit pour que la syntaxe soit correcte lorsqu'un commit est créé.
? Pick additional lint features: 
❯◉ Lint on save
 ◉ Lint and fix on commit
  1. Jest a pour avantage de gérer la couverture de code nativement contrairement à Mocha + Chai qui ont besoin d'Istanbul, en revanche, Jest a parfois des problèmes de cache lorsqu'on le lance en mode watch, à vous de voir celui que vous souhaitez choisir en fonction du temps à investir :
? Pick a unit testing solution: 
  Mocha + Chai 
❯ Jest
  1. Cypress s'intègre très bien dans une CI (Continuous Integration), vous trouverez plus d'informations dans leur documentation :
? Pick a E2E testing solution:
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based)
  1. Il est possible de gérer les configurations des différentes fonctionnalités dans des fichiers séparés ou dans le package.json :
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
❯ In dedicated config files 
  In package.json
  1. Enfin, vous pouvez sauvegarder votre présélection pour la choisir à nouveau dans un nouveau projet (cf: étape 1) :
? Save this as a preset for future projects? (y/N)

Après une certaine durée dépendante de vos options, votre projet Vue.js est prêt à être lancé avec npm run serve ou yarn serve :

Application Vue.js

Analyser

Tout comme Angular Console, Vue CLI permet d'effectuer graphiquement de nombreuses opérations comme :
créer un projet ;
ajouter un plugin ;
lancer son application ;
tester ;
monitorer.

Pour ça, il suffit de lancer vue ui :

Lancement de vue ui

Ensuite, on peut importer notre projet :

Import d'un projet

La vue Plugins de notre projet s'affiche :

Vue Plugins

Un clic sur Ajouter un plugin, nous permet d'installer un plugin comme par exemple cli-plugin-pwa :

Ajout du plugin PWA

La vue Dépendances nous affiche graphiquement les informations de nos dépendances Node.js :

Liste des dépendances

La vue Configuration permet de changer les couleurs de notre plugin PWA (progressive web app) :

Configurations du plugin PWA

Les Tâches

La vue Tâches de vue ui permet de lancer l'application avec serve ou de la fabriquer avec build et offre un dashboard donnant l'état de notre application :

Dashboard serve

La vue lint nous indique ici des erreurs liées aux console.log générés par le plugin PWA dans son service worker :

Dashboard lint

Les autres vues indiquent des résultats dans une sortie console comme dans lint.

Derrière tout ça

Aucune configuration webpack n'est visible dans le projet généré et même si on peut accéder à la configuration webpack de l'application, cette dernière est cachée par vue-cli-service.

À l'utilisation, je trouve ça très confortable, les services gèrent très bien la configuration webpack, de manière totalement transparente et il n'est pas interdit d'ajouter une nouvelle configuration dans un fichier vue.config.js.

Un fichier .env permet d'ajouter des variables d'environnement à Vue.js, c'est très pratique parce qu'il y a tout un processus de surcharge pour la production ou le développement que vous pouvez poursuivre dans la documentation.

Parfois, la commande vue-cli-service peut devenir plus gênante puisqu'elle gère elle-même un sous programme. C'est le cas des tests avec Mocha + Chai qui ne sont pas lancés avec Istanbul, ce qui ne permet pas d'avoir de coverage et nous incite à passer à Jest qui le comprend nativement.

Conclusion

À l'instar de nombreux générateurs, Vue CLI est très pratique et le mode graphique vue ui est très agréable pour générer, ajouter des extensions ou gérer les configurations de ses composants.

Pour un projet Vue.js, cet outil devient vite indispensable grâce à sa simplicité et son efficacité.

Je vous conseille de l'essayer, même si vous ne faites pas du Vue.js, pour voir à quel point il est facile de gérer une application avec.


Vous avez trouvé cette publication utile? Cliquer sur
Ippon
Ippon est un cabinet de conseil en technologies, créé en 2002 par un sportif de Haut Niveau et un polytechnicien, avec pour ambition de devenir leader sur les solutions Digitales, Cloud et BigData.

Ippon accompagne les entreprises dans le développement et la transformation de leur système d’information avec des applications performantes et des solutions robustes.

Ippon propose une offre de services à 360° pour répondre à l’ensemble des besoins en innovation technologique : Conseil, Design, Développement, Hébergement et Formation.

Nous avons réalisé, en 2017, un chiffre d’affaires de 31 M€ en croissance organique de 30%. Nous sommes aujourd’hui un groupe international riche de plus de 320 consultants répartis en France, aux USA, en Australie et au Maroc.
FRANCE Website LinkedIn