Introduction

Pourquoi utiliser un framework front-end ?

Lorsque vous développez une application web, vous pouvez choisir de coder votre interface utilisateur en utilisant des méthodes traditionnelles, comme du JavaScript pur ou jQuery. Cependant, ces méthodes peuvent rapidement devenir complexes et difficiles à maintenir à mesure que votre application grandit. Un framework front-end comme Vue.js vous permet de structurer votre code de manière plus efficace et modulaire.

Les avantages d'un framework front-end :

• Modularité : Le code est mieux structuré grâce à des composants réutilisables, facilitant ainsi la gestion du projet.
• Maintenance simplifiée : Un framework bien conçu facilite la mise à jour de l'application et la correction des bugs.
• Gain de productivité : Avec des outils et des conventions intégrées, vous passez moins de temps à configurer et plus de temps à développer des fonctionnalités.
• Réactivité : Un framework comme Vue.js rend l'interface utilisateur réactive, c'est-à-dire que l'UI se met à jour automatiquement en fonction des modifications des données.

Pourquoi utiliser Vue.js ?

• Facilité d'apprentissage : Sa syntaxe est intuitive et la documentation est bien fournie.
• Composants réutilisables : Vue permet de structurer l'application en petits morceaux réutilisables, facilitant la gestion du code.
• Réactivité intégrée : Vue.js met à jour automatiquement l'interface utilisateur en fonction des données, ce qui rend le développement d'interfaces interactives très simple.
• Écosystème complet : Vue offre des outils comme Vue Router pour la navigation, Pinia pour la gestion d'état, et Vite pour une compilation rapide.

Single Page Application (SPA)

Une Single Page Application (SPA) est une application web qui charge dynamiquement le contenu sans recharger la page entière. Cela signifie que l'interface utilisateur est mise à jour en fonction des actions de l'utilisateur sans avoir à recharger la page. Les frameworks front-end comme Vue.js sont souvent utilisés pour créer des SPAs en raison de leur capacité à gérer efficacement les mises à jour de l'interface utilisateur.

Installation et configuration

npm create vue@latest vujs-tutorial
cd vuejs-tutorial
npm install
npm run dev

Bundler et Vite

Un outil de bundling pour le web est un logiciel qui prend en entrée plusieurs fichiers source (généralement du code JavaScript, mais aussi du CSS, des images, etc.) et qui les regroupe en un ou plusieurs fichiers "bundlés" optimisés pour être déployés en production. L’objectif principal est de réduire le nombre de requêtes HTTP, d’optimiser la taille des fichiers (par exemple en supprimant les espaces inutiles ou en minifiant le code) et de gérer les dépendances de manière efficace. Autrement dit, le bundler transforme une base de code modulaire en un format compréhensible et performant par les navigateurs web.

Vite se démarque particulièrement dans ce domaine pour plusieurs raisons :

Initialisation de Vue avec main.ts et App.vue

main.ts

Le fichier main.ts est le point d'entrée principal de l'application. C'est ici que l'instance Vue est créée et que le composant racine (souvent App.vue) est monté dans l'élément HTML prévu à cet effet, généralement défini dans index.html. Un exemple typique de main.ts ressemble à ceci :

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// Crée une instance de l'application Vue à partir du composant App
const app = createApp(App)

// Monte l'application dans l'élément HTML qui a pour id "app"
app.mount('#app')

Les points clés à retenir :

• On importe la fonction createApp depuis Vue et le composant racine App.
• On crée l'application avec createApp(App).
• L'appel mount('#app') associe l'application à l'élément DOM dont l'id est "app". Cet élément se trouve dans le fichier index.html.

App.vue

Le fichier App.vue est le composant racine de l'application Vue. Il contient généralement trois sections principales :

1. Le bloc <template> qui définit la structure HTML du composant.
2. Le bloc <script> qui contient la logique JavaScript (ou TypeScript) du composant.
3. Le bloc <style> qui permet d'ajouter des styles CSS spécifiques à ce composant.

Voici un exemple basique de structure d'un fichier App.vue :

<!-- App.vue -->
<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue'
  import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
  header {
    line-height: 1.5;
  }

  .logo {
    display: block;
    margin: 0 auto 2rem;
  }

  @media (min-width: 1024px) {
    header {
      display: flex;
      place-items: center;
      padding-right: calc(var(--section-gap) / 2);
    }

    .logo {
      margin: 0 2rem 0 0;
    }

    header .wrapper {
      display: flex;
      place-items: flex-start;
      flex-wrap: wrap;
    }
  }
</style>

Rôle par rapport à index.html

Le fichier index.html est la page HTML principale qui charge l'application Vue. Il contient un élément conteneur (souvent un div avec l'id "app") dans lequel Vue va injecter le contenu généré par l'application.

Exemple simplifié d'index.html :

<!-- index.html -->
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

Explications :

• Le <div id="app"></div> sert de conteneur dans lequel Vue montera l'application créée dans main.ts.
• Le fichier main.ts est référencé en tant que module JavaScript. Grâce à ce chargement, l'instance Vue est créée, le composant App.vue est rendu et tout le contenu de l'application est injecté dans le conteneur défini dans index.html.