Découverte et installation de VueJS

Bonjour à tous et bienvenue dans ce premier tutoriel sur vueJS.
Vue CLI, vous permet d’installer votre environnement de développement vueJS en 2 minutes. Nous verrons dans ce tutoriel comment l’installer et comment l’utiliser.

VueJS c’est quoi ?

Vue CLI c’est un framework Javascript qui va vous permettre de développer des “Single Page Applications”, c’est à dire des applications qui sont faites avec du responsive javascript, bref en version simple, des applications qui peuvent fonctionner sans recharger la page à chaque interaction (principalement avec des appels AJAX) qui permettent à l’utilisateur d’avoir une expérience utilisateur très agréable et très moderne.

VueJS a été développé par Evan You en 2014 qui après avoir bossé chez Google sur AngularJS a décidé de faire son propre framework javascript qui permettra de faire du réactiveJS mais de façon beaucoup plus simple pour les développeurs. VueJS est le projet de github qui a récemment été présenté comme le projet étant le projet open source le plus populaire surpassant au passage Angular2, backboneJS ou encore jQuery.

Pour les développeurs que vous êtes, cela va vous permettre de gérer votre applications sous forme d’objet avec des attributs etc...ce qui va grandement vous faciliter la vie pour réaliser vos composants javascripts. De plus, vous allez pouvoir faire réagir votre page “en direct” en mappant vos formulaires avec les attributs de vos objet par exemple (nous verrons plus tard plus en détails toutes ces notions).

Généralement les applications vueJS vont fonctionner en échangeant avec votre serveur via des API REST. Ce qui va vous permettre de pouvoir bien séparer vos développements lors de la création de vos applications.

Installer VueJS sur Ubuntu

Pour installer vue-cli, vous allez avoir besoin d’installer d’abord npm:

sudo apt-get update
sudo apt-get install nodejs npm

Puis pour installer vue-cli :

npm install -g vue-cli

Vous aurez ensuite accès à la commande vue :

pierre@mypc:~/vuejs$ vue

  Usage: vue <command> [options]

  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

  Options:

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

Pour initialiser l’environnement vous utiliserez la commande suivante :

pierre@mypc:~/vuejs$  vue init webpack pierre

Le premier argument est le template, ici “webpack”.Le second est le nom de votre projet, ici “pierre”. Répondez ensuite aux questions, comme ceci :

pierre@mypc:~/vuejs$ vue init webpack pierre

  This will install Vue 2.x version of the template.
  For Vue 1.x use: vue init webpack#1.0 pierre
? Project name pierre
? Project description A Vue.js project
? Author pierre <pierrefay@myemail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "pierre".
   To get started:
     cd pierre
     npm install
     npm run dev
     
   Documentation can be found at https://vuejs-templates.github.io/webpack

Votre projet est maintenant initialisé. Vous pouvez donc aller dans le dossier “pierre” ou se trouve vos fichiers, et faire un “npm install” qui va permettre d’installer tous les composants nécessaires pour faire fonctionner votre projet vueJS.
La commande “npm run dev” vous permettra ensuite de faire tourner toutes les tâches de votre projet (notamment ESLint). Nous reviendrons sur ces commandes plus loin dans cet article.

La structure de mon projet VueJS

Quand vous allez dans le répertoire de votre projet (ici “pierre”) vous pouvez voir différents dossiers :

- build/
Ce dossier contient la configuration pour le serveur de développement et de production. Théoriquement vous ne devriez rien modifier ce dossier.

- src/
Ce dossier va contenir votre code VUEJS, c’est vous qui définissez comment se structure votre application au sein de ce dossier...c’est ici que vous mettrez votre code.

- static/
C’est ce dossier qui va contenir les “Assets”, c’est à dire les images, les fichiers js et css de votre application.

- test/
Ce dossier va contenir tous les fichiers relatifs à vos tests unitaires et fonctionnels.

- package.json
C’est ce fichier qui est utilisé par NPM pour définir les dépendances de votre applications.

- index.html
C’est votre page par défault, c’est elle qui contient votre applicaiton vueJS

- config/
C’est le dossier qui contient plusieurs fichiers de configurations important pour votre application.

Les commandes utiles pour travailler avec VueJS

Pour le développement, on lancera son serveur local node.js qui permettra de faire fonctionner Lint et les différents composants nécessaires pour faire tourner notre application vueJS :

pierre@mypc:~/vuejs$  npm run dev 

Une fois le développement terminé, on voudra “builder” notre application. C’est à dire minimiser les JS, CSS etc…si vous avez défini ce traitement et faire toutes les tâches importantes pour pouvoir mettre en production notre code. On va donc lancer la commande suivante :

pierre@mypc:~/vuejs$  npm run build 

Voilà pour le moment retenez déjà ces 2 commandes. On ne parlera pas des tests dans cette partie, pas besoin de complexifier le sujet à ce stade, il est déjà assez complexe pour démarrer avec vueJS.
Maintenant que vous avez installé votre environnement pour pouvoir travailler avec VueJS, commençons à coder ! Rdv dans le prochain tutoriel.