Technologies Web

VueJS : Démarrage d’une application

Avant d’aborder la partie boilerplate et celle de compilation de son application, je pense qu’il est nécessaire de vous montrer comment votre application démarre. Chose assez simple, vous avez juste besoin d’un fichier index.html et d’un fichier index.js :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Ma première APP</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
import Vue from 'vue';

new Vue({
    el          : '#app',
    template    : '<App/>',
});

Comme vous pouvez le voir, nous créons une instance de Vue qui utilise la div ayant pour id app. Dans cette div est injecté la balise <App/>. Tout de suite, faire ceci ne sert pas à grand chose car cette balise sert en fait à dire où placer notre tout premier composant que l’on va créer juste après.

Il est à noter que ce fichier index.js va servir à définir beaucoup de choses par la suite. En effet, c’est ce même fichier qui servira à inclure les différents modules de VueJS (VueX, VueRouter, …) ainsi que des designs externes (propres à un composant externe, …).

Attardons nous maintenant sur notre premier composant. Pour être cohérent avec le nom de balise utilisé, le fichier de notre composant s’appelera donc App.vue et a le contenu suivant :

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="hello">
    <h1>Bienvenue dans VueJS</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
  </div>
</template>

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

<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;

      h1, h2 {
        font-weight: normal;
      }
      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        display: inline-block;
        margin: 0 10px;
      }
      a {
        color: #42b983;
      }
    }
</style>

Le composant en lui même est très simple et affichera juste les liens utiles à VueJS avec le logo à placer dans le répertoire assets. Mais faire ceci ne suffit pas à afficher votre composant, il faut le renseigner à votre instance de Vue en modifiant le fichier index.js comme suit :

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el          : '#app',
    template    : '<App/>',
    components  : {
        App,
    },
});

Comme vous le voyez, pour attacher votre composant au sein d’une vue, nous devons le renseigner dans l’attribut components. Cet attribut est un objet permettant d’instancier un composant par rapport à une balise particulière présente dans votre template. Vu que l’on utilise l’ES6 ici, avoir { App } revient à faire { App : App }. Du coup notre composant sera appelé via la balise <App />. Il est à noter que, dans une autre vue, vous pouvez avoir une balise identique mais celle-ci peut instancier un composant totalement différent que celui-ci.

Il est important de noter que l’attribut components sert uniquement à renseigner les composants propres à votre projet. Les composants externes seront disponibles dans toute votre application grâce à leur enregistrement dans VueJS via Vue.use().

Voilà, maintenant vous savez comment initialiser un projet Vue. Nous verrons dans le prochain article comment organiser ce projet et comment le compiler pour les navigateurs.