Faire un helloworld avec VueJS

Aujourd'hui on va créer notre premiere application vueJs from scratch, pour faire le traditionnel "Hello World", qu'on poussera un peu plus loins qu'un simple Hello World pour aborder quelques notions de base vueJS et vous permettre de prendre en main ce magnifique framework javascript trés rapidement.
La premiere étape consiste à créer votre projet :


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

pierre@mypc:~/vuejs$ cd pierre
pierre@mypc:~/vuejs$ npm install

Puis lancer l'environnement de développement :


pierre@mypc:~/vuejs$  npm run dev

Supprimez ensuite tout le contenu du dossier src/ et vous êtes maintenant prêt à démarrer !

Etape 1: Créer la page HTML qui contiendra notre appli vueJS

La premiere étape consiste à créer un fichier html qui va contenir une div avec un attribut ID spécifique qui vous permettra de dire à vue JS : "cette div, tu la remplace par mon appli vueJS". Editez donc le fichier index.html comme ceci :


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My HelloWorld vueJS</title>
  </head>
  <body>
    <div id="myApplication"></div>
  </body>
</html>

Ici on a crée une page HTML qui ne contient qu'une div avec l'ID "monApplication".

Etape 2: Déclarer notre application vueJS

Par défault, l'environnement de développment va prendre le fichier src/main.js en entrée pour créer notre application. On va donc créer le fichier main.js comme ceci :


// 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: '#myApplication',
  template: '<App/>',
  components: { App }
})

Petite explication :

Dans ce fichier, on importe les classes Vue et App pour pouvoir les utiliser dans la suite du script.

On créer ensuite notre objet Vue en lui passant en paramétre:
- el: l'identifiant de l'élément qui contiendra notre application
- template: le contenu de la div, ici on lui met une balise <App /> c'est à dire le composant "App" qu'on déclare juste en dessous. On lui définira un template qui viendra remplacer cette balise <App />.
- component: le composant Vue (ie le fichier .vue) qui contiendra 3 parties : le code logique, le template, le style css.

Etape 3: Créer notre component App

Un component vueJS est représenté par un fichier ".vue" avec comme nom, le nom de son component (ici App donc le fichier s'apellera "App.vue" ).

Dans cette étape on va déclarer notre component App qui sera notre seul composant pour notre helloworld vueJS.

Ce composant ce compose en 3 parties contenus dans des balises :
- template : qui contient le code à afficher à la place de la balise <App />
- script: qui contient le code javascript, c'est ici qu'on va insérer la "logique" de notre composant.
- style: pas obligatoire, mais toujours pratique si vous voulez défini un style css particulier pour votre élément.

Créez donc le fichier /src/App.vue comme ceci :


<template>
  <div id="myApplication">
    <h1>Hello World</h1>
    <p>little text behind the title</p>
  </div>
</template>

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

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vous devriez maintenant voir votre Hello World d'afficher ! Félicitation ! Vous pouvez télécharger le code de ce tutoriel via le liens juste en dessous de cet article. On repartira du code de cet article pour les prochains tutoriels.

Documents disponibles pour cet article :

Source code

Les livres qui peuvent vous aider :

Article PrécédentModifier notre premiere appli VueJS Article suivantLes propriétés sous VueJS