1. NPM

NPM (Node Package Manager) est un gestionnaire de module (un peu comme APT sur Debian/Ubuntu) qui va permettre d’installer des librairies créées par d’autres développeurs (Vue.js, JQuery, etc…​).

Pour vous donner une idée de l’importance du service, NPM c’est ça :

  • Packages : 589 339

  • Downloads - Last day : 561 114 892

  • Downloads - Last week : 3 443 685 310

  • Downloads - Last month : 14 502 331 276

Étape 1 : Installation

Pour installer NPM (et Node) ça se passe ici : https://docs.npmjs.com/getting-started/installing-node (vous l’avez peut-être déjà fait lors du dernier TD)

Étape 2 : npm install

  1. Créez un dossier pour ce TD et déplacez-vous dedans avec la console.

    Lancez la commande suivante :

    $ npm install vue@2.x.x

  2. Affichez le contenu de votre dossier. Les fichiers téléchargés par NPM sont installés par défaut dans le dossier node_modules. Affichez le contenu de ce dossier.

    Le dossier vue contient le contenu du package vue (pour l’instant tout est logique).

  3. Installez maintenant webpack (npm install webpack) et affichez le contenu de node_modules.

    230 dossiers devraient s’afficher. En effet NPM télécharge automatiquement les dépendances de chaque package !

Étape 3 : package.json

  1. Supprimez le dossier node_modules.

  2. Créez un fichier package.json :

    {
  "name": "demo-lp-dawin",
  "description": "Demo project for LP DAWIN",
  "version": "1.0.0",
  "author": "Votre nom <email>",
  "dependencies": {
        "vue": "VERSION",
        "webpack": "VERSION"
  }
}

    Trouvez la dernière version de Vue.js 2 et Webpack sur le site de NPM, et indiquez la dans votre package.json.

  3. Lancez la commande npm install. NPM va lire les dépendances du projet et installer les versions demandées.

  4. Affichez le contenu de node_modules, vous devriez obtenir le même résultat qu’à l’étape 2.

Single File Component

Afin de pouvoir utiliser les Single File Component (fichiers .vue) ainsi que javascript ES6, il faut compiler notre projet javascript. Pour ce faire l’outil standard est webpack (https://webpack.github.io/).

Étape 4 : Création du projet avec Vue CLI

Vue CLI est l’outil développé par la communauté Vue.js pour simplifier la création et la gestion d’un projet Vue : https://cli.vuejs.org/.

Nous allons l’utiliser pour initialiser le projet.

Commencez par installer globalement l’outil Vue CLI :

$ npm install -g @vue/cli

Une fois l’outil installé, lancez l’interface graphique :

$ vue ui

Créez un nouveau projet dans un nouveau dossier, en laissant les paramètres par défaut et en sélectionnant le preset Babel.
Pour rappel Babel va permettre de convertir du code ES6 en code utilisable par l’ensemble des navigateurs.

Ouvrez ensuite le dossier dans votre IDE.

Les fichiers qui vont nous intéresser sont les suivants :

  • src/main.js
    Contient l’initialisation de Vue.js et le chargement du composant App.vue comme composant principal

  • src/App.vue
    Composant chargé au lancement de l’application

  • components/HelloWorld.vue
    Composant utilisé à l’intérieur du composant App.vue

Vous pouvez noter que les Single File Components sont utilisable directement : il s’agit des 2 fichiers .vue
Vous pourrez bien sûr créer d’autres fichiers de composant par la suite.

Pour lancer l’application, exécutez la commande :

$ npm run serve

Le site va alors être dispo à l’adresse http://localhost:8080

Le code va être recompilé automatiquement lorsque vous sauvegarderez un fichier.

Prenez quelques minutes pour parcourir les fichiers de code et comprendre l’architecture en place.

Étape 5 : Conversion du projet

  1. Faites évoluer le code de la dernière séance pour utiliser les SFC. Vous obtiendrez l’architecture suivante :

|_ package.json
|_ src/
    |_ main.js
    |_ App.vue
    |_ components/
        |_ movieitem.vue