MBDS Madagascar 2018-2019

PROPOSITION TRES INCOMPLETE DU PROJET FIL ROUGE

•  https://lms.univ-cotedazur.fr/<wbr/>mod/assign/view.php?id=14750

TP 1 : Exercices avec VueJS, Firebase et WebServices RESTFUL

Développer en mode "CLI" avec un environnement de build/testy  

   

• Page de documentation de vue-cli: https://github.com/vuejs/vue-cli
• Page générale sur VueJS: https://github.com/vuejs

Cette fois-ci, pour terminer l'introduction à VueJS, le plus élégant/simple des trois gros frameworks "industriels" modernes (React, VueJS, Angular), nous allons regarder comment on peut développer avec "un environnement de développement", qu'on appelle "CLI" pour "Command Line Environment". 

Les trois frameworks cités, mais aussi Polymer dont on vient de parler, proposent un environnement "CLI".

Travail à faire :

1. Installer Vue-cli: exécuter "npm install -g vue-cli", si vous êtes sous Linux ou Mac OS, il se peut que vous deviez faire "sudo npm install -g vue-cli" (essayez d'abord sans le sudo).
   
   Idem, sous windows il se peut que vous deviez avoir ouvert le terminal DOS en mode "administrateur".
    
2. Créez un répertoire pour le TP
    
3. Allez dans ce répertoire en mode ligne de commande, depuis votre terminal
    
4. On va maintenant créer une application VueJS avec le mode "webpack-simple" (cf la page de doc: https://github.com/vuejs/vue-cli), on peut en effet créer plusieurs types de projets avec vue-cli.
   
   La commande à exécuter est "vue init webpack-simple nom_de_votre_app", je suggère quelques chose comme nom qui ressemble à "my-app-vue-cli1" par exemple. Vous exécuterez donc la commande : "vue init webpack-simple my-app-vue-cli1"
   
   Vous devrez alors répondre à un petit questionnaire, en général vous faites "enter", répondez "non" si on vous demande d'utiliser "SAAS" (un pré-processeur CSS comme LESS).
   
   Cela va créer un sous-répertoire my-app-vue-cli qui contiendra tout ce qu'il faut pour démarrer :
   • Une application exemple,
   • un environnement de développement,
   • Des fichiers de configuration pour webpack etc.
      
5. Allez dans le répertoire de l'application et faites "npm install" pour installer les dépendances (de l'environnement de développement, et du framework)
   
    
6. Exécutez l'application de test avec "npm run dev". Si jamais vous avez une page qui affiche "ERR EMPTY RESPONSE", il se peut que vous deviez changer le port du serveur de dev. Allez dans le fichier webpack.config.js et ajoutez une ligne "port:3000" par exemple, dans la config du devserver. 
   
   Voici ce que j'ai dans ma config:
   
   devServer: {
       historyApiFallback: true,
       noInfo: true,
       overlay: true,
       port:3000
   },
    
7. Etudier le code du fichier main.js, index.html et App.vue
   
   
8. Créer dans src/components (vous créerez ce dossier) un composant User.vue qui affiche le nom d'un utilisateur
   Ici un exemple de code: User.vue
   
   
9. Créer un composant Info.vue qui affiche juste des infos supplémentaires sous forme de <p>, et qui soit LOCAL à User.vue (voir Live Coding) (vous le déclarerez dans un champ "components" de User.vue. Pensez à importer Info.vue dans User.vue
   
   
10. Déclarez User comme composanrt global dans le main.js, il sera ainsi utilisable partout, dans n'importe quel fichier .vue
    
    
11. Ajoutez <app-user></app-user> dans App.vue, pensez à faire un import de User.vue dans App.vue
    
    
12. Essayez d'ajouter le support pour <app-user nom="Michel"></app-user> par exemple, en déclarant une prop "nom" dans User.vue
     
13. En étant sûr d'être dans le répertoire du projet faites "npm install -save vue-router" pour installer le module de routage de vueJS.
    
    
14. Dans main.js ajoutez les lignes relatives au routeur (import, Vue.use, définition des routes, etc.) pour que le fichier ressemble à ceci :
    
    import Vue from 'vue';

    import VueRouter from 'vue-router';

    import App from './App.vue';

    import User from './components/User.vue';

    import Blog from './components/Blog.vue';

    import Compte from './components/Compte.vue';

    
    

    // Définition des routes

    Vue.use(VueRouter);

    
    

    const routes = [

        {path:'/blog', component: Blog},

        {path:'/compte', component: Compte},

        {path:'/', component: User},

    ]

    
    

    const router = new VueRouter({

        routes: routes,

        mode:'history'

    })

    // La ligne ci-dessous rend le composant User utilisable

    // partout, dans tous les fichiers .vue

    // C'est un GLOBAL COMPONENT

    Vue.component("app-user", User);

    
    

    new Vue({

    el: '#app',

    router:router,

    render: h => h(App)

    })
15. Remplacez le template de App.vue par le code suivant et testez:

<template>
  <div id="app">
    Hello {{msg}}

    <div>
      <router-link to="/">Home</router-link>
      <router-link to="/blog">Blog</router-link>
      <router-link to="/compte">compte</router-link>
    </div>

    <router-view></router-view>

    <app-user></app-user>
      <p>Ceci est un test</p>
  </div>
</template>

Correction de l'exercice: live conding...