À la Découverte de Vue.js : Installation et Création de notre première Application

Par jcherilus, 15 février, 2025
Découvrez Vue.js : Installation et Création d'une Application "Hello World"

Dans cet article, nous allons voir comment installer Vue.js et créer notre première application "Hello World".

Prérequis

Avant de commencer, assurez-vous d'avoir :

  • Un ordinateur
  • Node.js installé sur votre machine
  • Un terminal (cmd, PowerShell, ou terminal Linux/macOS)
  • Un éditeur de code comme Visual Studio Code

Qu'est-ce que Vite ?

Vite est un outil moderne pour le développement front-end qui rend le travail des développeurs beaucoup plus fluide et rapide. Contrairement aux anciens outils comme Webpack, Grunt ou Gulp, Vite mise sur la simplicité et l'efficacité pour offrir une expérience de développement optimisée.

Avec Vite, chaque fichier JavaScript est chargé au moment où il est nécessaire, grâce à la fonctionnalité ES Module Import. Cela signifie que l'application démarre instantanément sans devoir compiler tout le projet à l'avance, ce qui accélère considérablement le développement. Vite est également conçu pour être facile à utiliser et à configurer, ce qui en fait un choix populaire pour les développeurs de front-end.

Cet outil a été créé par Evan You, le développeur derrière Vue.js, dans le but de simplifier et d’accélérer le développement d’applications front-end, en particulier pour Vue.js.

  • Hot Module Replacement (HMR) rapide permettant de voir les changements instantanément.
  • Optimisation automatique pour la production avec une configuration minimale.
  • Support natif de Vue.js et d'autres frameworks modernes.

Vite est particulièrement recommandé pour les projets Vue.js, car il améliore significativement l'expérience des développeurs avec un temps de compilation réduit et des mises à jour rapides.

Installer Vue.js

Quelle différence entre CDN et npm ?

Avant de choisir une méthode d'installation, voici les différences :

  • CDN : Idéal pour tester rapidement Vue.js sans configuration. Il suffit d'inclure un fichier script dans une page HTML.
  • npm + Vite : Recommandé pour les projets évolutifs nécessitant un environnement de développement optimisé, avec des performances améliorées et des outils comme Hot Module Replacement (HMR).

En fonction de vos besoins, choisissez la méthode la plus adaptée !

1. Installation rapide via CDN

Si vous souhaitez tester Vue.js sans installation complexe, vous pouvez simplement inclure Vue via un CDN dans un fichier HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Hello World</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello, Vue.js!'
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

En ouvrant ce fichier dans un navigateur, vous verrez "Hello, Vue.js!" affiché dynamiquement.

2. Installation via npm (recommandé pour un projet structuré)

Si vous utilisez Node.js et que vous souhaitez créer une application plus robuste, suivez ces étapes :

  1. Initialiser un projet Vue.js 
    npm init vue@latest
  2. Configurer le projet (appuyez sur Enter pour les valeurs par défaut).
  3. Se déplacer dans le projet 
    cd nom-du-projet
  4. Installer les dépendances 
    npm install
  5. Lancer le serveur de développement 
    npm run dev

Votre application Vue.js est maintenant accessible via http://localhost:5173/ .

Structure du projet Vue.js avec Vite

Une fois l'installation terminée, voici à quoi ressemble la structure du projet :

alt text

Créer une première application Vue.js

Dans le fichier src/App.vue, écrivez ce code :

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

Dans src/main.js, importez et montez le composant principal :

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Puis démarrez votre projet avec :

npm run dev

Conclusion

Félicitations ! Vous venez de créer votre première application Vue.js.

Commentaires1