Aller au contenu principal

Prise en main de VuePress

Découverte de la structure de VuePress et personnalisation de la page d'accueil.

Notions théoriques​

Les éléments clés de la structure de VuePress 2 sont :

  • .vuepress : ce dossier contient la configuration, les composants, les plugins et les thèmes.
  • config.ts ou config.js : le fichier de configuration principal.
  • pages : des fichiers Markdown ou Vue qui sont convertis en pages HTML.
  • public : un dossier pour les fichiers statiques.
  • theme : un dossier pour les thèmes personnalisés, avec la possibilité d'héritage de thèmes.
  • node_modules : le dossier contenant les modules installés par npm ou yarn.
📌 Qu'est-ce qu'un fichier Vue ?

Un fichier Vue est un fichier avec l'extension .vue, et il est utilisé dans le cadre du framework JavaScript Vue.js.

Ce type de fichier permet de créer des composants Vue, qui sont des éléments réutilisables et autonomes de l'interface utilisateur.

Un fichier Vue est structuré en trois parties principales :

  1. Template : Il contient le HTML qui définit la structure du composant. Il peut inclure des directives et des bindings spécifiques à Vue.js pour rendre le contenu dynamique.
<template>
  <div class="greeting">
    Bonjour {{ name }}!
  </div>
</template>
  1. Script : Il contient le code JavaScript qui fournit la logique du composant. Cela inclut les données, les méthodes, les propriétés calculées, les hooks de cycle de vie, etc.
<script>
export default {
  data() {
    return {
      name: 'Alice'
    };
  },
  // méthodes, computed properties, etc.
};
</script>
  1. Style : Il contient les styles CSS qui sont appliqués au composant. Les styles peuvent être globaux ou limités au composant grâce à l'attribut scoped.
<style scoped>
.greeting {
  color: blue;
}
</style>

Lorsque le fichier .vue est traité par Vue.js, chaque partie est prise en compte pour créer un composant qui peut être intégré dans une application Vue.js.

Les composants Vue permettent une approche modulaire de la construction d'applications Web, facilitant la gestion de projets complexes en divisant l'interface utilisateur en petits blocs gérables et réutilisables.

Exemple pratique​

Pour personnaliser la page d'accueil avec VuePress 2 :

  1. Ouvrez le fichier README.md à la racine de votre projet, qui sert de page d'accueil.

  2. Écrivez une présentation personnelle en Markdown.

  3. Pour vous présenter, placez le fichier ma-photo.jpg dans le dossier portfolio-vuepress/my-blog/docs/.vuepress/public.

  4. Pour ajouter un CV téléchargeable, placez le fichier cv.pdf dans le dossier portfolio-vuepress/my-blog/docs/.vuepress/public.

  5. Créez un lien vers votre CV dans le README.md :

    [Mon CV](/cv.pdf)

  6. Vérifiez les modifications dans votre navigateur à l'adresse : http://localhost:8080/.

📌 Comment démarrer le serveur Web de VuePress pour tester le site dans le navigateur, à l'adresse http://localhost:8080/ ?

  • Se positionner dans le dossier my-blog, avec la commande : 
    cd my-blog
  • Démarrer le serveur Web intégré à VuePress, par défaut sur le port 8080, avec la commande : 
    npm run docs:dev

Test de mémorisation/compréhension​


Où doit-on placer le fichier `config.ts` pour VuePress 2 ?


TP pour réfléchir et résoudre des problèmes​

Objectif du TP​

Créer et personnaliser entièrement la page d'accueil de votre site VuePress 2, en y ajoutant votre présentation, un CV téléchargeable et en utilisant des éléments avancés de Markdown.

Consignes du TP​

  1. Rédigez une présentation personnelle captivante en Markdown dans le fichier README.md.
  2. Ajoutez une photo de vous au format JPG dans le dossier portfolio-vuepress/my-blog/docs/.vuepress/public et insrérer cette photo dans la page d'accueil.
  3. Ajoutez un CV au format PDF dans le dossier portfolio-vuepress/my-blog/docs/.vuepress/public et créez un lien de téléchargement sur la page d'accueil.
  4. Employez des éléments de Markdown avancés (listes, tableaux, citations) pour structurer le contenu de façon attrayante.
  5. Intégrez des images ou des icônes pour enrichir visuellement la page d'accueil.
  6. Vérifiez les modifications dans votre navigateur à l'adresse : http://localhost:8080/.
📌 Comment démarrer le serveur Web de VuePress pour tester le site dans le navigateur, à l'adresse http://localhost:8080/ ?

  • Se positionner dans le dossier my-blog, avec la commande : 
    cd my-blog
  • Démarrer le serveur Web intégré à VuePress, par défaut sur le port 8080, avec la commande : 
    npm run docs:dev

Corrigé du TP​

📌 Solution du TP
  • Vous avez exploré la structure de VuePress et personnalisé votre page d'accueil.
  • Vous êtes maintenant prêt à créer votre portfolio et à le partager avec le monde.

Versionning​

  1. Créer un fichier .gitignore dans portfolio-vuepress/my-blog/ :

    # VuePress default temp directory
    .vuepress/.temp
    # VuePress default cache directory
    .vuepress/.cache
    # VuePress default build output directory
    .vuepress/dist

    # Node.js
    node_modules

  2. Envoyer vos modifications vers GitHub, avec les commandes dans portfolio-vuepress/ :

    git add .
    git commit -m "Page d'accueil"
    git push