Modifier notre premiere appli VueJS

Alors ca y est maintenant vous avez démarré la création de votre application, vous lancez donc votre environnement de développement via la commande:

pierre@mypc:~/vuejs$  npm run dev

Vous voyez donc votre page index.html s’afficher dans votre navigateur web...on va pouvoir démarrer !

Aujourd’hui on va apprendre à modifier la page d’exemple que vous avez sous les yeux, cela va vous faire une petite introduction, nous allons allez vite sur certaines notions mais ne vous inquiétez pas si vous ne comprenez pas tout, nous reviendrons sur toutes les notions dans la suites des articles.

Le code de la page par défaut se trouve dans index.html à la racine, le voici :

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>pierre</title>
 </head>
 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
</html>

Comme vous pouvez le remarquer, on inclut par ici de javascript car on a lancé directement le site via vue-cli, on est en environnement de développement donc pas besoin mais lorsque vous envoyez en prod, n'oubliez pas de builder votre application avant.

Le code javascript de votre page se trouve dans src/main.js


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

Ici on lui dit de charger Vue et App.
Puis on dit à votre navigateur de créer une instance VueJS qui sera représenté par la div avec l’identifiant “app”, on chargera le template et le composant VueJS “App” qui se trouve dans src/App.vue.

Définition d’un composant vueJS

Sous VueJS chaque élément HTML peut être étendu via composant. C’est à dire qu’un composant va être attaché à un élément html pour lui “donner vie”. Le composant va permettre de définir des attributs et des fonctions pour votre élément HTML.

On importe un composant en utilisant la fonction “import” et en lui passant le chemin vers le fichier “.vue” du fichier qui représente le composant. Dans notre exemple, le composant Hello est dans le dossier src/components/ donc pour importer depuis src/App.vue le composant Hello, on fait ceci:


import Hello from './components/Hello'

Le fichier App.vue est composé de 3 parties, qu’on retrouvera pour tous nos composants :

- La partie “template” :

<template>
 <div id="app">
   <img src="./assets/logo.png">
   <hello></hello>
 </div>
</template>

C’est ici qu’on définit le contenu HTML de notre composant. Dans notre exemple, on affiche le logo et notre composant “hello” qu’on a importé et qu’on va définir dans la partie “script”.

- La partie “script”:

<script>
import Hello from './components/Hello'

export default {
 name: 'app',
 components: {
   Hello
 }
}
</script>

C’est ici qu’on défini le code javascript attaché à notre composant.

Dans notre exemple, on importe le composant “Hello” via import, puis on définit l’application défault qui aura pour nom “app” et qui utilisera le composant “Hello” importé précédemment.

La partie “style”:

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

C’est ici qu’on défini, si on le souhaite, le code css utilisé pour mettre en forme notre application.

Modifier notre première page

Maintenant qu’on a compris comment est construite notre première page d’exemple, modifions la !

Virer le logo

Je vais dans mon fichier main.js, je vois que j'appelle le composant App sur la div #app. j’ouvre donc mon fichier App.vue.
Je vois que le logo est défini dans le template de ce fichier, je vais donc le commenter :

<template>
 <div id="app">
   <!-- <img src="./assets/logo.png"> -->
   <hello></hello>
 </div>
</template>

Si je consulte ma page http://localhost:8080/ via mon navigateur, je vois maintenant que le logo est bien commenté.

Modifier les liens

Je vois maintenant que mon composant App appelle un composant Hello pour afficher le reste du contenu de ma page, je vais donc ouvrir le composant correspondant dans le fichier src/components/Hello.vue

Je n’ai plus qu’a modifier les liens entre les balises .

Changer le message en définissant une nouvelle valeur pour la variable

Une variable est définie dans le template via:


 {{ msg }} 



ce qui veut dire que son contenu est dans la fonction data() de notre script. Je peux donc modifier le message comme ceci :

<script>
export default {
 name: 'hello',
 data () {
   return {
     msg: 'Mon nouveau message'
   }
 }
}
</script>

Le message sera alors modifié.
Nous verrons plus en détails dans les prochains article comment définir et utiliser une variable avec vueJS.

Préparer nos fichiers pour envoyer notre travail en production

Pour l’utiliser en production, ou nous n’aurons pas directement nodejs pour interpréter notre code, et récupérer automatiquement les bons fichiers. Nous allons donc devoir définir dans la page ou aller chercher notre fichier javascript d’entrée.

On va donc commencer par “builder” notre projet, pour avoir nos fichiers dans le dossier /dist

pierre@mypc:~/vuejs$  npm run build

Cette commande va exporter votre application dans le dossier dist/ à la racine de votre projet, il sera bien organisé dans les différents dossiers qui le composent.

Vous avez maintenant un fichier : dist/index.html qui appelle les javascripts nécessaire dans la page :

<script src=build/build.js></script>

<script type=text/javascript src=/static/js/vendor.fe8c964ae3f1d9265d0c.js></script>
<script type=text/javascript src=/static/js/app.e5adf3e401fe1b3a835b.js></script>

Votre application marche donc maintenant parfaitement en production.

Voilà c’est la fin de ce tutoriel, cela peut paraître assez compliqué pour le moment mais ne vous inquiétez pas dans les prochaines leçons on va revoir chaque notions évoqués ici plus en détails.
Les livres qui peuvent vous aider :
  • Livre Learning VueJS 2
Questions sur cette leçon
Pas de questions pour cette leçon. Soyez le premier !

Vous devez etre connecté pour demander de l'aide sur une leçon.