Préambule

• Ce TP permet de créer son premier projet vuejs avec vue-cli et de comprendre l'organisation générale d'une application SPA créée via vue-cli.
• Le contexte est celui d'un savant fou, Dr Mad, qui peut acheter des virus dans une boutique spécialisée, les triturer dans son laboratoire, et revendre ses inventions sur le dark web.
• Ce TP permet également de découvrir quelques éléments basiques de la syntaxe vuejs en écrivant quelques composants simples.
• A noter que certaines parties du sujet consiste à copier/coller du code dans certains fichiers, sans fournir d'explications détaillées. Dans ce cas, celles-ci seront données lors des cours dédiés à la syntaxe vuejs ou aux plugins.
• En conclusion, ce TP est plutôt un tutoriel de découverte qu'un véritable exercice.

0°/ Installer l'environnement de développement

• Si ce n'est déjà fait, installer node, npm, serve. Pour cela, consulter l'article : support : Installation de vue-cli & config. idea

1°/ Créer le projet avec vue-cli + vue-router + vuex

1.1°/ Créer un canevas de base

• Dans un terminal, taper : vue create drmad

• on obtient un menu comme suivant :

  ? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  ❯ Manually select features
  

• Utiliser la flèche bas pour choisir "Manually select features". On arrive sur un second menu :

  ? Please pick a preset: Manually select features
  ? Check the features needed for your project:
  ◉ Choose Vue version
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◉ Router
  ❯◉ Vuex
  ◯ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing
  

• Pour sélectionner un item, il suffit d'utiliser les flèches haut/bas puis d'appuyer sur espace mettre à jour la sélection d'un item.

• Pour ce TP, on va installer les plugins vue-router et vuex, comme indiqué dans l'exemple ci-dessus.

• Une fois la sélection faite, appuyer sur Entrée. Un nouveau menu apparaît avec plusieurs questions qui se suivent.

<aside> ⚠️

ATTENTION ! Dans cet exemple, le profil par défaut crée un projet basé sur vuejs v2, mais selon la version de vue-cli, le choix par défaut peut également être la v3.

</aside>

• Voici les réglages à utiliser pour les TPs (la plupart sont des choix par défaut) :

  • vue v2.x

    <aside> ⚠️

    ATTENTION ! on travaille exclusivement en vuejs V2 => ne surtout pas choisir v3.x

    </aside>

  • history mode for router

  • ESLint with error prevention only

  • Lint on save

  • Config in dedicated config files.

• Ensuite, vue-cli va créer un répertoire drmad, et télécharger plein de modules node, puis créer les fichiers "par défaut" du projet.