Démarrer avec Vuejs

06/08/20 dannyEnglish Version

Qu’allons nous faire ?

Nous allons réaliser un premier projet avec le framework Vue dans sa version 2.6.12


Avant de commencer

Vue est un framework JavaScript libre développé par Evan You.

Les versions successives ont été les suivantes :

  • Vue est sorti le 11 février 2014
  • Vue 1.0.0 Evangelion est sorti le 27 octobre 2015
  • Vue 2.0.0 Ghost in the shell est sorti le 30 septembre 2016
  • Vue 2.1.0 Hunter X Hunter est sorti le 22 novembre 2016
  • Vue 2.2.0 Initial D est sorti le 26 février 2017
  • Vue 2.3.0 JoJo's Bizarre Adventure est sorti le 27 avril 2017
  • Vue 2.4.0 Kill la kill est sorti le 13 juillet 2017
  • Vue 2.5.0 Level E est sorti le 13 octobre 2017
  • Vue 2.6.0 Macross est sorti le 4 Février 2019
  • Vue 2.6.11 est sorti le 13 décembre 2019

Conditions préalables

Les outils nécessaires pour réaliser ce didacticiel sont

  • Vue version 2.6.12
  • Vue-cli version 4.5.6
  • Visual studio code version 1.45.1
  • node.js version 12.18.3 LTS (Long Term Support)
  • npm (node package manager) version 6.14.8

Les dernières versions de ces outils sont disponibles ci-dessous


Initialisation du projet

La documentation Vue est accessible sur le site officiel
Nous essaierons le plus souvent possible de respecter les best practices préconisées par Evan You.

Nous utiliserons pour cela l'un des outils mis à notre disposition par l'équipe de Vue.

Cet outil se nomme Vue CLI (Command Line Interface)

La création de projet est détaillée à l'adresse suivante
https://vuejs.org/v2/guide/typescript.html#Project-Creation

- Installer Vue CLI en global sur votre poste.

# Installation de Vue CLI dernière version disponible
npm install --g @vue/cli

# Installation de Vue CLI version spécifique
npm install --global @vue/cli@4.5.6

# Test de version installée
vue --version

# Désinstallation de vue cli
npm uninstall -g @vue/cli

Initialisation du projet

Les différentes étapes seront les suivantes

  • Générer le  projet
    Sélectionner babel/eslint par défaut
  • Se positionner dans le projet
  • Exécuter le projet
# Générer un projet appelé vue-starter
vue create vue-starter

# Se positionner dans le projet
cd vue-starter

# Exécuter
npm run serve

Le script "npm run serve" déclenche la commande vue-cli-service serve.
Celle-ci execute le projet sur un port par défaut (8080)

Il ne reste qu'à tester le fonctionnement dans un navigateur en lancant l'url suivante.

# Tester
http://localhost:8080/

Visual studio code

Dans la suite du tutoriel nous utiliserons Visual Studio Code.
VS code est un éditeur de code développé par Microsoft pour Windows, Linux et OS X.

Après avoir lancer VS code ouvrez un dossier dans le répertoire vue-starter
Ouvrez ensuite le fichier package.json.
Celui-ci contient un certain nombre de commandes (ou scripts) que nous utiliserons tout au long de ce tutoriel.

Ouvrez une console VS code (sélectionner Afficher/Terminal) pour éxécuter les scripts suivants

  • npm run  start : Execute l'application en mode développement
  • npm run  build : Compile l'application dans le répertoire build
  • npm run  test : Execute les tests unitaires
package.json
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

Mise à jour

Le fichier package.json contient les différentes dépendances de votre projet.

Concernant les dépendances et leur version la documentation npm est la suivante
https://docs.npmjs.com/files/package.json#dependencies

Les spécificateurs de version sont nombreux.

Nous pouvons utiliser par exemple

  • version Doit correspondre à la version exactement
  • ~version  "Approximativement équivalente à la version"
  • ^version “Compatible avec la version”


Nous obterons quant à nous pour le premier spécificateur "version", qui est le plus simple, le plus explicite mais aussi le plus restrictif.

Nous allons mettre à jour le fichier package json avec les dernières dépendances

- Pour contrôler les dépendances à mettre à jour lancer la commande
npm outdated 

- A ce jour toutes les dépendances peuvent être mises à jour

- Modifier le fichier package.json comme suit puis executer le script
npm install

package.json
  "dependencies": {
    "core-js": "3.6.5",
    "vue": "2.6.12"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.5.6",
    "@vue/cli-plugin-eslint": "4.5.6",
    "@vue/cli-service": "4.5.6",
    "babel-eslint": "10.1.0",
    "eslint": "7.9.0",
    "eslint-plugin-vue": "6.2.2",
    "vue-template-compiler": "2.6.12"
  },

Conclusion

Il ne reste plus qu'à effectuer le debuggage, les tests et le passage en production.

Commencons par le debugage.
Toutes les modifications entrainent une recompilation du code.

# Exécuter
npm run serve

# Tester
http://localhost:8080/

Par exemple Modifiez le fichier HelloWorld.vue
Compilation Tests : For a guide and recipes on how to configure / customize this project,<br>


La compilation est alors éxécutée automatiquement et le navigateur se réactualise.

Les tests à effectuer sont les suivants.

# Analyse de code
npm run lint

Enfin la compilation et la mise en production.

# Compiler
npm run build

# Tester
http-server -p 8080 -c-1 dist
http://localhost:8080/

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos 4 guides complets

Démarrez avec angular CLI

Gérez le routing

Appliquez le Lazy loading

Intégrez Bootstrap

Ganatan site Web avec Angular