• formation Grafikart
• doc officielle, guide de démarrage (en français !)

Pour connaître la version utilisée,

npm list vue

… le fichier package.json ne contient pas la version exacte (^3.4.29 → et 3.5.8 via npm list vue !)

Avoir node d'installé et npm, yarn ou autre
Avoir une bonne connaissance de JS, dont les fonctions fléchées, les map, filter, reduce

npm create vue@latest

qui va demander à installer le package create-vue si nécessaire, puis poser des questions à commencer par le nom du projet puis les dépendances (pour commencer, on répond non pour toutes)
une fois le projet créé, il nous invite à basculer dedans, lancer l'installation des dépendances et démarrer le serveur

cd nom-projet
npm install
# dans un onglet, exécuter 
npm run dev

À la racine du projet, on trouve le fichier index.html qui contient une div avec l'id app et l'appel du script JS src/main.js, et dans le répertoire source, on trouve les fichiers : 

• main.js qui crée une application App et réalise un montage dans la div #app
• App.vue le fichier de base de notre application Vue

Lancer Codium/VSC ou votre éditeur de code préféré, puis ouvrez le fichier

App.vue

<script setup></script>
 
<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
 
<style scoped></style>

On peut considérer que la partie <template> est le squelette et la partie <script> le _cerveau_

Commençons par remplacer le titre :

App.vue

<script setup>
  import { ref } from 'vue'
 
  const mon_titre = ref('Mon Titre')
</script>
 
<template>
  <h1>{{ mon_titre }}</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
 
<style scoped></style>

L'essentiel est dans l'ajout pour la partie script de la définition de l'objet mon_titre qui est ensuite injecté dans le template en le mettant entre double-accolades.

L'exemple de base est d'ajouter à notre page un compteur : Commençons par ajouter les lignes suivantes : dans la section <script>

const count = ref(0)

et dans la section <template>

<p>Compteur : {{ count }}</p>

et pour pouvoir incrémenter notre compteur : dans la section <script>, on ajout la fonction increment

const increment = () => {
  count.value++
}

et dans la section <template>, on ajoute le bouton pour appeler cette fonction

<button v-on:click="increment">Incrémenter</button>

doc officielle sur les directives