Introduction à Vue.js

Vue.js : Qu'est-ce que c'est ?

Vue.js est un framework JavaScript progressif utilisé pour construire des interfaces utilisateur interactives et réactives. Il est souvent comparé à d'autres frameworks tels que React et Angular, mais se distingue par sa simplicité et sa facilité d'apprentissage. Vue.js adopte une approche fondée sur les composants, ce qui permet de diviser l'interface utilisateur en petites parties réutilisables.

Principales caractéristiques de Vue.js

Réactivité : Vue.js utilise un système de réactivité qui permet de lier automatiquement les données à l'interface utilisateur. Lorsque les données changent, l'interface utilisateur est mise à jour de manière réactive.
Composants : Vue.js encourage l'utilisation de composants réutilisables, ce qui facilite la création d'interfaces utilisateur modulaires et maintenables.
Directives : Les directives de Vue.js aident à manipuler le DOM de manière déclarative. Par exemple, la directive v-if permet de conditionner l'affichage d'un élément en fonction d'une expression.

Avantages de l'utilisation de Vue.js

Facilité d'apprentissage : Vue.js est réputé pour sa courbe d'apprentissage douce, ce qui en fait un choix populaire pour les débutants en développement web.
Performances : Vue.js est conçu pour être rapide et efficace. Son système de réactivité optimisé permet d'obtenir des performances élevées.
Flexibilité : Vue.js est très flexible et peut être utilisé pour créer des applications de toutes tailles. Il peut être intégré à d'autres bibliothèques ou frameworks existants.
Documentation complète : Vue.js dispose d'une documentation complète et de nombreux exemples qui facilitent l'apprentissage et le développement avec le framework.

Installation avec Vite

Installation avec Vue

Structure du projet

En explorant la structure du projet, vous verrez plusieurs fichiers et dossiers importants, tels que :

index.html : Le point d'entrée de l'application.
src : Le dossier contenant les fichiers source de l'application.
package.json : Configuration du projet.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

C’est un fichier HTML semblable à ce que vous connaissez. Il y a deux éléments essentiels à noter :

La balise <div id="app"></div> est l'élément racine de l'application Vue.js. C'est là que l'application sera rendue.
La balise <script type="module" src="/src/main.js"></script> charge le fichier JavaScript principal de l'application, main.js, en tant que module. Ce fichier est situé dans le dossier /src du projet. Le fichier main.js est responsable de l'initialisation de l'application Vue.js et de l'importation des composants nécessaires.

package.json

Le fichier package.json est un fichier de configuration utilisé dans les projets JavaScript, y compris les projets Vue.js et Vite.js. Il est généralement situé à la racine du projet et contient des informations sur le projet lui-même, ainsi que sur ses dépendances, scripts et autres métadonnées.

{
  "name": "vite-vue-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.9"
  }
}

Voici à quoi sert le fichier package.json :

Gestion des dépendances : Le fichier package.json répertorie toutes les dépendances du projet, c'est-à-dire les bibliothèques et les modules externes utilisés dans le projet. Ces dépendances peuvent être des packages npm (Node Package Manager) téléchargés à partir du registre npm public ou des packages locaux spécifiques au projet. Le fichier package.json spécifie également les versions des dépendances utilisées, ce qui permet de garantir la reproductibilité du projet.
Scripts de commande : Le fichier package.json permet de définir des scripts de commande personnalisés qui peuvent être exécutés à partir de la ligne de commande. Ces scripts peuvent effectuer différentes tâches, telles que le lancement de l'application, la compilation des fichiers source, les tests unitaires, la création de builds de production, etc. Les scripts de commande peuvent être exécutés en utilisant l'outil npm ou yarn, en fonction de celui que vous utilisez dans votre projet.
Informations sur le projet : Le fichier package.json contient des informations sur le projet lui-même, telles que le nom du projet, la version, la description, l'auteur, la licence, etc. Ces informations fournissent une vue d'ensemble du projet et sont souvent utilisées pour générer automatiquement la documentation, les métadonnées des packages et d'autres informations.
Configuration du projet : Le fichier package.json permet également de spécifier des configurations spécifiques au projet. Par exemple, dans un projet Vue.js, vous pouvez définir des options de configuration pour le bundler, le préprocesseur CSS, le transpileur JavaScript, etc. Ces configurations peuvent être spécifiées dans la section vue du fichier package.json ou dans des fichiers de configuration séparés tels que vite.config.js.

Le dossier `src`

Le dossier src contient les fichiers sources de l'application, tels que le point d'entrée JavaScript, les composants, les styles et les ressources.

main.js

Le fichier main.js est le point d'entrée de l'application. C'est ici que l'application Vue.js est initialisée et montée sur l'élément racine de l'application. Vous pouvez également y importer des bibliothèques externes, configurer des plugins et définir des directives globales.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

La première ligne import { createApp } from 'vue' importe la fonction createApp du package vue. Cela permet d'utiliser les fonctionnalités de Vue.js dans notre application.
La deuxième ligne import './style.css' importe le fichier style.css. Cela permet d'appliquer les styles définis dans ce fichier à notre application.
La troisième ligne import App from './App.vue' importe le composant App à partir du fichier App.vue. Ce composant représente la vue principale de notre application.
La dernière ligne createApp(App).mount('#app') crée une instance de l'application Vue en utilisant le composant App importé précédemment. Ensuite, cette instance est montée sur l'élément avec l'ID #app dans le fichier index.html. Cela signifie que notre application Vue sera rendue à l'intérieur de cet élément dans la page HTML.

App.vue

Le fichier App.vue est le composant principal de l'application et contient la structure de base de l'interface utilisateur.

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Un fichier Vue se compose généralement de trois parties principales : <template>, <script>, et <style>. Chacune de ces parties joue un rôle spécifique dans la construction d'un composant Vue.

La section <template> : La section <template> est l'endroit où vous définissez la structure HTML de votre composant. Vous pouvez utiliser des balises HTML standard ainsi que des directives spécifiques à Vue pour lier des données et définir la logique de rendu. C'est ici que vous créez l'interface utilisateur de votre composant en utilisant des éléments HTML et des composants Vue.
La section <script> : La section <script> est l'endroit où vous définissez la logique JavaScript de votre composant. Vous pouvez y importer des dépendances, déclarer des variables, définir des méthodes, des propriétés et des hooks de cycle de vie, et interagir avec les données. Cette section est également utilisée pour importer et exporter des composants, configurer des plugins ou définir des mixins.
La section <style> : La section <style> est l'endroit où vous définissez les styles CSS de votre composant. Vous pouvez utiliser des sélecteurs CSS standard pour cibler les éléments de votre template et leur appliquer des styles spécifiques. La section <style> peut être déclarée de différentes manières, notamment avec l'attribut scoped pour limiter la portée des styles uniquement au composant en cours.

HelloWorld.vue

Dans le code du composant HelloWorld.vue, nous pouvons voir l'utilisation des composants et des props, ainsi que la notion de ref.

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

Les composants sont des éléments réutilisables dans une application Vue.js. Ils permettent de découper l'interface utilisateur en morceaux plus petits et autonomes, ce qui facilite la gestion et la réutilisation du code. Chaque composant peut avoir son propre template, sa logique et ses styles.

Les props sont des propriétés qui permettent de passer des données d'un composant parent à un composant enfant. Dans cet exemple, le composant HelloWorld reçoit une prop nommée msg de type String. Cette prop est utilisée dans le template pour afficher le contenu de la prop dans un élément <h1>. Les props permettent de rendre les composants plus flexibles et réutilisables en leur permettant de recevoir des données dynamiques de l'extérieur.

La notion de ref est utilisée pour créer une référence réactive à une valeur dans un composant Vue. Dans ce cas, la variable count est déclarée en tant que ref(0), ce qui signifie qu'elle est réactive et peut être utilisée dans le template. Lorsque le bouton est cliqué, la valeur de count est incrémentée. Les refs sont utiles pour suivre les valeurs qui peuvent être modifiées et réagir aux changements de ces valeurs.

En résumé, les composants sont des éléments réutilisables qui permettent de découper l'interface utilisateur en morceaux plus petits et autonomes. Les props sont utilisées pour passer des données d'un composant parent à un composant enfant. La notion de ref permet de créer des références réactives à des valeurs dans un composant Vue. Ces concepts sont essentiels pour la construction d'applications Vue.js flexibles et réactives.

Introduction à Vue.js

Introduction à Vue.js

Vue.js : Qu'est-ce que c'est ?#

Principales caractéristiques de Vue.js#

Avantages de l'utilisation de Vue.js#

Installation avec Vite#

Installation avec Vue#

Structure du projet#

index.html#

package.json#

Le dossier src#

App.vue#

HelloWorld.vue#

Vue.js : Qu'est-ce que c'est ?

Principales caractéristiques de Vue.js

Avantages de l'utilisation de Vue.js

Installation avec Vite

Installation avec Vue

Structure du projet

index.html

package.json

Le dossier `src`

App.vue

HelloWorld.vue