• 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>

const increment = (event) => {
  console.log(event)
  count.value++
}
<!-- et pour mieux comprendre : -->
console.log(count, count.value)
<!-- et comprendre que count est un objet, que dans la partie script, il faut count.value pour avoir sa valeur, mais dans la partie template, count est déconstruit et c'est bien sa valeur est utilisée -->

et maintenant, ajoutons un style qui mette en rouge le compteur si sa valeur est > 5 et en vert si >, dans la partie template :

<p :style="{color: count > 5 ? 'red' : 'green'}">Compteur : {{ count }}</p>

:id="`p-${count}`"

Un des intérêts d'utiliser un framework JS est évidement que ça s'adapte automatiquement à un contenu variable comme une liste de valeurs.
On ajout, dans la partie script :

const movies = ref([
  'Les tontons flingueurs',
  'Le grand bleu',
  'Le chant des forêt'
])

et dans le template :

<ul>
  <li v-for="movie in movies"
      :key="movie">
    {{ movie }}
  </li>
</ul>

ajoutons un petit formulaire pour ajouter un film :
dans le template

<form action="" @submit.prevent="addMovie">
  <input type="text" placeholder="nouveau titre de film"
    v-model="movieName">
  <button>Ajouter</button>
</form>

dans le script

const movieName = ref('')
const addMovie = () => {
  movies.value.push(movieName.value)
  movieName.value = '' // On vide après la soumission
}

doc officielle sur les directives