L'article précédent sur la mise en place d'une application VueJS existant sur un cluster Kubernetes m'a fortement donné envie de m'attaquer au framework Javascript tendance en ce moment.

Nous allons ainsi coder un site Web réaliste en utilisant Vue.js. Dans ce tutoriel, je vais vous apprendre à créer un site Web d'une agence de voyages spécialisée en sports extrêmes avec Vue, Vuex, Vue Router, Vuetify et Docker.

Ce didacticiel est présenté sous la forme d’une série d’articles qui vous guideront de la première installation de Vue à la création d’un site Web entièrement fonctionnel pour l'agence de voyage. L'image d'en-tête ci-dessus montre le site Web que nous allons créer.  

Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Ce qui donne :

Vue CLI v3.4.1
✨  Creating project in /Users/admin/my-website.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.13.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 52.30s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 15.77s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-website.
👉  Get started with the following commands:

 $ cd my-website
 $ yarn serve

Placez-vous dans le dossier qui vient d'être crée et utilisez la commande serve pour lancer l'application sur l'adresse http://localhost:8080

MBP-de-admin:~ admin$ cd my-website
MBP-de-admin:my-website admin$ yarn serve
yarn run v1.13.0
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                   

 DONE  Compiled successfully in 3104ms                                                                                                                 15:02:43


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.90:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Résultat :


Vue a monté une application SPA pour nous et a installé Vue Router et Vuex. Nous pouvons voir le Routeur Vue en action en cliquant sur about de dans le menu en haut de la page. Cela charge la page about.

Ajouter Vuetify

Vuetify est un framework de type material design . C'est assez semblable à Bootstrap pour les amateurs. Vuetify fournit plus de 80 composants de material design que nous pouvons utiliser pour styliser notre SPA dans Vue.  Pour ajouter Vuetify à notre application, commencez par aller sur votre terminal et arrêtez le serveur. Ajoutez ensuite Vuetify à notre application avec cette commande:

MBP-de-admin:my-website admin$ vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.4.6
info All dependencies
└─ vue-cli-plugin-vuetify@0.4.6
✨  Done in 3.26s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.13.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 7.44s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     src/assets/logo.svg
     src/plugins/vuetify.js
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue
     yarn.lock

   You should review these changes with git diff and commit them.

On vous posera une série de questions. Je vais choisir de ne pas utiliser le modèle prédéfini car je souhaite conserver la structure créée par l'application Vue par défaut. Pour le reste des questions, j'ai pris par défaut.  

Configuration de Prettier

Lors de la création de notre application Vue, j'ai choisi d'utiliser Prettier. J'ai également choisi d'installer le paramètre de configuration dans le fichier package.json. Je veux prendre le temps maintenant de configurer Prettier pour utiliser mes paramètres préférés.  Dans votre éditeur de code, ouvrez le fichier package.json. Dans ce fichier, vous verrez les paramètres par défaut qui ont été créés pour eslint. Juste après l'objet eslintConfig et avant l'objet postcss, je vais ajouter des paramètres pour configurer Prettier. Je vais définir le retrait à 4 espaces et utiliser des guillemets simples. (Remarques: si vous préférez un retrait de 2 espaces et / ou l’utilisation de guillemets, il n’est pas nécessaire d’ajouter ce changement.)  

Voici le paramètre Prettier que j'ai ajouté à mon fichier package.json :

    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "tabWidth": 4,
    "singleQuote": true
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

Ensuite, je souhaite reconfigurer tous les fichiers pour utiliser mes nouveaux paramètres Prettier. Cela signifie que tous les retraits doivent être modifiés de 2 à 4 espaces et que les guillemets simples doivent être remplacés par des guillemets simples. Heureusement, Vue fournit un script qui résoudra automatiquement tous ces problèmes.  Depuis le terminal, lancez cette commande:

MBP-de-admin:my-website admin$ npm run lint

> my-website@0.1.0 lint /Users/admin/my-website
> vue-cli-service lint

The following files have been auto-fixed:

  src/App.vue
  src/components/HelloWorld.vue
  src/main.js
  src/plugins/vuetify.js
  src/views/Home.vue

 DONE  All lint errors auto-fixed.

Cela imitera tous les fichiers et les modifiera en fonction de mes nouveaux paramètres Prettier. Cette commande vous donnera une liste de tous les fichiers qui ont été corrigés automatiquement.

Styliser la page d'accueil de notre application

Nous utiliserons Vuetify pour styliser notre application. Vous pouvez trouver plus de détails sur tous les composants d'interface utilisateur offerts par Vuetify ici.

Toutes les applications utilisant Vuetify doivent être encapsulées avec <v-app>. Ouvrez le fichier App.vue et supprimez tout le code du modèle et tous les styles. Votre App.vue devrait ressembler à ceci:

<template>
    <v-app>
        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
export default {
    name: 'App'
};
</script>

<style>
</style>

Ce code enveloppe notre application dans la balise <v-app> requise par Vuetify. À l'intérieur de cette balise se trouve la balise <v-content>. À l'intérieur de cela se trouve la balise <router-view>. La balise de vue du routeur affiche la page actuelle sur laquelle vous vous trouvez. Lorsque nous sommes sur la page d'accueil, la vue d'accueil est affichée. Lorsque nous naviguons vers la page à propos, il affiche la vue à propos de.  

Créer la page d'accueil

Ouvrez ensuite le fichier Home.vue situé dans le dossier views. Nous allons nous débarrasser du code qui est là. Supprimez tout le contenu du modèle. Supprimez la commande d'importation pour HelloWorld et le commentaire. Supprimer l'objet composants.  Voici ce que nous allons créer pour la page d'accueil:

yeah

La première chose que nous allons commencer est la navigation. Je vais créer un nouveau composant Vue juste pour la navigation. Dans le dossier components, créez un nouveau fichier appelé AppNavigation.vue.  Notre navigation devra fonctionner sur différentes tailles d'écran. Sur des écrans plus grands, tels qu'un ordinateur portable ou un ordinateur de bureau, nous afficherons un menu en haut de l'écran. Sur des appareils plus petits, comme un téléphone portable, nous afficherons l'icône de menu traditionnel "hamburger".

Lorsqu'un utilisateur clique sur l'icône, un tiroir se glisse à partir de la gauche avec notre menu. Ce tiroir restera au-dessus du site Web jusqu'à ce que l'utilisateur le ferme.  Vuetify fournit deux outils pour afficher le menu pour différentes tailles d'écran. Pour les écrans moyens et grands, nous utiliserons le composant Vuetify <v-toolbar>. Sur des écrans plus petits, nous allons montrer le composant <v-navigation-tiroir>.  Commençons par échafauder la configuration par défaut pour un nouveau composant Vue. Le fichier AppNavigation.vue doit contenir le code suivant:

<template>

</template>

<script>
export default {
    name: 'AppNavigation'
};
</script>

<style scoped>
</style>

Nous allons commencer par créer le menu qui sera affiché sur des écrans de moyenne et grande taille. Pour ce faire, nous allons utiliser le composant <v-toolbar>. Voici le code que vous allez mettre pour la navigation:

<template>
        <v-toolbar app color="teal ligthen-2" dark>
            <v-toolbar-side-icon></v-toolbar-side-icon>
            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
            <v-btn flat>Menu</v-btn>
            <v-spacer></v-spacer>
            <v-btn flat>SIGN IN</v-btn>
            <v-btn color="teal lighten-3">JOIN</v-btn>
        </v-toolbar>
</template>

<script>
export default {
    name: 'AppNavigation'
};
</script>

<style scoped>
</style>

Ce code produira ce menu:

Laissez-moi vous expliquer les éléments que j'ai utilisés dans le menu. Pour la <v-toolbar>, j'ai ajouté l'application prop. Cet accessoire désigne le composant dans le cadre de la présentation de l'application. Il est utilisé pour ajuster dynamiquement le dimensionnement du contenu. Lorsque le tiroir latéral coulisse, le contenu de l'écran s'ajuste en conséquence.  

Ensuite, j'ai ajouté une couleur à la navigation. Vuetify donne accès à toutes les couleurs de la spécification Material Design. Ces valeurs peuvent être utilisées dans vos feuilles de style, vos fichiers de composants et sur des composants réels via le système de classes de couleurs. J'ai choisi une couleur verte pour la navigation avec la variante lighten-2. Voici toutes les couleurs disponibles avec Vuetify.  Un certain nombre de composants d'assistance sont disponibles pour être utilisés avec la barre d'outils. Un composant d'assistance est l'icône latérale de la barre d'outils. Ceci est le menu hamburger. Je l'ai d'abord placé dans la barre d'outils.  Un autre composant d'assistance est le titre de la barre d'outils. Je l'ai ajouté après l'icône latérale de la barre d'outils.

J'affiche l'appTitle qui est défini dans les données.  Ensuite, j'ai une série de boutons. Les boutons Vuetify utilisent le composant <v-btn>. Pour les trois premiers boutons, je spécifie un accessoire de flat. Les boutons plats n'ont pas d'ombre de boîte ni de fond. Le conteneur du bouton est affiché uniquement en survol. Cela me permet de créer des boutons qui imitent l'apparence d'un menu traditionnel.  Pour le bouton JOIN, je n'utilise pas l'accessoire plat. J'ajoute une couleur au bouton.  La dernière chose que j'ai faite sur la <v-toolbar> consiste à ajouter l'accessoire sombre. Cet accessoire applique la variante de thème sombre à la barre d'outils. Cela inverse tout le texte, donc au lieu d'être noir, ils sont maintenant blancs.

Améliorer le style dans la navigation

La première mise en œuvre de la navigation fournit toutes les fonctionnalités que je souhaitais. Mais je voudrais faire quelques changements. Tout d’abord, je ne veux pas que le menu des hamburgers soit affiché, sauf si je suis sur un petit appareil. De même, je ne souhaite afficher aucun bouton du menu lorsque je suis sur un petit appareil.  Vuetify fournit un assistant d'affichage. Les aides à l’affichage vous permettent de contrôler l’affichage du contenu. Cela inclut la visibilité conditionnelle en fonction de la fenêtre d'affichage actuelle ou du type d'affichage d'élément réel.  

Pour l'icône latérale de la barre d'outils, je souhaite qu'elle ne soit visible que sur les périphériques XS et SM. Pour les écrans MD et LG, je souhaite que l’icône latérale de la barre d’outils ne soit pas visible. De même, je souhaite que tous les boutons soient affichés sur les écrans MD et LG et cachés sur des écrans plus petits.  Je vais ajouter la classe hidden-md-and-up sur l’icône latérale de la barre d’outils. Je vais ajouter la classe hidden-sm-and-down à tous les boutons et à l'espaceur.

Maintenant, je veux ajouter un autre changement de mise en page. Lors de l'affichage de l'application sur de petits appareils, je ne verrai que le menu des hamburgers et le titre de l'application. Actuellement, ils se trouvent tous deux à gauche de l'écran. Je souhaite modifier ceci afin que le titre de l'application apparaisse à droite de l'écran. Cela fournira un équilibre entre les deux éléments affichés.  Pour ce faire, je vais ajouter un nouveau <v-spacer> entre l’icône latérale de la barre d’outils et le titre de la barre d’outils. L'espaceur déplacera tout ce qui le suit vers la droite de l'écran. Mais je veux seulement que cet spacer apparaisse sur de petits écrans. Alors j'y ajoute la classe hidden-md-and-up.  Voici le code final:

<v-toolbar app color="teal lighten-2" dark>
    <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
    <v-spacer class="hidden-md-and-up"></v-spacer>
    <v-toolbar-title>{{appTitle}}</v-toolbar-title>
    <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
    <v-spacer class="hidden-sm-and-down"></v-spacer>
    <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
    <v-btn color="teal lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
</v-toolbar>

Création de la navigation pour les petits écrans

Pour les petits écrans, nous utiliserons le composant <v-navigation-drawer> de Vuetify. Si nous ajoutons ceci au modèle, nous obtiendrons immédiatement une erreur. En effet, chaque composant Vue ne devrait avoir qu'une seule racine dans le modèle. En ayant à la fois un <v-navigation-drawer> et une <v-toolbar> dans notre modèle, nous avons deux racines. Pour éviter cela, créez un <span> pour envelopper les deux.  Voici le code pour le tiroir de navigation:

<template>
    <span>
        <v-navigation-drawer app v-model="drawer" class="teal lighten-2" dark disable-resize-watcher>
            <v-list>
                <template v-for="(item, index) in items">
                    <v-list-tile :key="index">
                        <v-list-tile-content>
                            {{item.title}}
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar app color="teal darken-4" dark>
            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
            <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
            <v-btn color="teallighten-3" class="hidden-sm-and-down">JOIN</v-btn>
        </v-toolbar>
    </span>
</template>

<script>
export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'Meal Prep',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};
</script>

<style scoped>
</style>

Laissez-moi vous expliquer ce que j'ai mis pour la navigation dans les tiroirs. J'ai ajouté l'application prop. C'est le même accessoire que nous avons ajouté pour la barre d'outils. Ensuite, j'ai ajouté un v-model qui recherche l'élément de données appelé tiroir. Dans les données, le tiroir sera initialement défini sur false. Cela signifie que le tiroir est fermé. Le tiroir s'ouvrira s'il est vrai et se fermera s'il est faux. J'ai ajouté une méthode de clic sur l'icône latérale de la barre d'outils. Lorsque vous cliquez sur le menu hamburger, la valeur du tiroir passe de true à false ou vice versa.  

Le dernier élément que j'ai ajouté est de lui donner une classe avec une couleur de teal lighten-2. J'ai décidé d'ajouter une couleur à mon tiroir car la couleur par défaut est le blanc.  J'utilise ensuite le composant <v-list> de Vuetify. Dans les données, j'ai créé un tableau appelé éléments. Ceci est un tableau d'objets. Chaque objet a une clé de texte et la valeur correspond à ce qui est affiché dans le menu.

J'utilise un élément de données au lieu de coder en dur les éléments de menu de la liste, car nous l'utiliserons dans des séries ultérieures lorsque nous ajouterons l'authentification.  Dans les données, j'ai ajouté un tiroir et des éléments:

export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'My-website',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};

Lorsque nous cliquons sur le menu hamburger, voici à quoi ressemblera le tiroir:

Le menu pour les petits appareils

Ajout de navigation à l'application

Maintenant que nous avons créé notre composant AppNavigation, nous devons l’ajouter à notre application. Ouvrez le fichier App.vue. Dans ce fichier, nous devrons importer notre composant AppNavigation. Ensuite, nous pouvons le placer dans notre application.  Voici le code que vous devriez avoir dans votre fichier App.vue:

<template>
    <v-app>
        <app-navigation></app-navigation>

        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
import AppNavigation from '@/components/AppNavigation';

export default {
    name: 'App',
    components: {
        AppNavigation
    }
};
</script>

<style>
</style>

Vous devez d'abord importer AppNavigation. Lorsque je l'importe, je lui donne le nom AppNavigation. Dans le script, j'ai ajouté un objet de composants contenant AppNavigation. Le format du nom est important. Lorsque le composant est ajouté, il coupe le nom par un trait d'union. Lorsque je mets le composant dans le modèle html, j'utilise le nom composé de <app-navigation>.

Création du contenu pour notre page d'accueil

Nous allons ajouter une image en plein écran pour notre page d'accueil. Ensuite, nous allons ajouter du texte sur l'image. Au lieu de placer notre code directement dans le fichier Home.vue situé dans le dossier views, je vais créer un nouveau composant Vue. Dans le dossier des composants, créez un nouveau fichier appelé HomeHero.vue.  

Vuetify dispose d'un système de grille en 12 points. Construite à l’aide de flex-box, la grille est utilisée pour mettre en forme le contenu d’une application. Le v-container peut être utilisé pour une page centrée sur le centre ou donner à l’élément de support fluide l’extension de sa largeur. v-layout est utilisé pour séparer les sections. La structure de votre mise en page sera la suivante, v-conteneur »v-mise en page» v-flex.  Nous utiliserons ce système de grille dans la conception de notre composant HomeHero. Nous allons utiliser <v-container fluid> pour notre élément racine dans notre modèle. Nous allons y ajouter la hauteur de remplissage de l'hélice. Cet accessoire ajustera automatiquement le conteneur pour avoir une hauteur de 100% de l'écran.

La dernière chose que je fais est d'ajouter une classe appelée home-hero.  Dans mes styles, je vais ajouter une image de fond au conteneur. Il s’agit de l’image en plein écran que les utilisateurs verront lors du chargement du site Web. J'utilise une image de unsplash.com.  À l'intérieur du conteneur, j'aurai une <v-layout>. La mise en page recouvre tout le texte affiché en haut de l'image. Vuetify fournit des paramètres de typographie que je vais utiliser pour styler le texte. Pour le texte principal, je lui donne un :

class="display-4 font-weight-black white--text"

Le display-4 produira du texte qui a une taille de police de 112 ps. Je vais remplacer cette épaisseur de police en spécifiant une police noire. Je veux que le texte soit blanc afin que je puisse ajouter du white-text. La dernière chose que j'ajoute est de spécifier le texte à centrer.  

J'utiliserai le même style pour la deuxième ligne de texte. Le seul ajout est que j'ajoute un alignement de mb-3. Vuetify fournit 5 niveaux d'espacement. Le mb dit appliquez une marge inférieure de 3. Cela donnera un espacement entre le texte de l'en-tête et du sous-tête.  

La dernière chose que j’ajoute est un bouton vers le bas de l’écran. J'ajoute ceci parce que parfois les gens pourraient ne pas penser à faire défiler l'écran pour voir plus de contenu puisque l'image est en plein écran. L'image est un indicateur visuel pour les utilisateurs qu'il y a plus de contenu ci-dessous.

J'utilise le composant <v-btn> ​​de Vuetify. C'est le même composant que nous avons utilisé dans la navigation. Cette fois, j'applique la prop fab au bouton. Les boutons flottants sont ronds et contiennent généralement une icône. Je vais ajouter une icône d'une flèche vers le bas. Le composant <v-icon> nécessite que vous inscriviez le nom de l'icône à afficher.

Voici une liste de toutes les icônes de matériaux disponibles que vous pouvez utiliser avec Vuetify.  Pour le bouton, je vais ajouter une classe qui mettra une marge supérieure à 5 et définira la couleur pour être la même couleur marron que celle que j'ai utilisée pour le menu. Pour l'icône, ma couleur est blanche. J'ai également défini l'icône pour être grand.  Voici le code pour le fichier HomeHero:

<template>
    <v-container fluid fill-height class="home-hero">
        <v-layout justify-center align-center column pa-5>
            <div class="display-4 font-weight-black white--text text-xs-center">HEALTHY MEALS</div>
            <div class="display-4 font-weight-black white--text text-xs-center mb-3">FOR YOUR TABLE</div>
            <div class="display-1 font-weight-bold white--text text-xs-center">Finally be a foodie at home with fresh, chef-prepared meals delivered daily to your door.</div>
            <v-btn fab class="mt-5 brown darken-4">
            <v-icon large color="white">expand_more</v-icon>
            </v-btn>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    name: 'HomeHero'
};
</script>

<style scoped>
.home-hero {
    background: url('https://source.unsplash.com/WLUHO9A_xik/1600x900');
    background-size: cover;
    width: 100%;
    height: 100%;
}
</style>

Ajout d'un composant HomeHero à l'application

Maintenant que nous avons créé notre composant, nous devons l’ajouter à l’application. Ouvrez le fichier Home.vue dans le dossier views. Comme nous l'avons fait avec AppNavigation, vous devez importer le composant et le placer dans le modèle. Voici à quoi devrait ressembler le fichier Home.vue:

<template>
    <span>
        <home-hero></home-hero>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';

export default {
    name: 'home',
    components: {
        HomeHero
    }
};
</script>

Ajouter plus de contenu à la page d'accueil

En ce moment, nous avons une très belle page d'accueil. Mais nous devons ajouter plus de contenu pour expliquer ce que notre service de voyages extrêmes fournit aux clients potentiels. Alors ajoutons cela maintenant.  Pour le contenu, nous allons créer un nouveau composant appelé HomeDetails.vue. Dans le dossiercomponents, créez un nouveau fichier appelé HomeDetails.vue. Pour le contenu, je vais utiliser Lorem Ipsum pour le texte.  

J'utiliserai le schéma de mise en page Vuetify en créant l'élément racine avec le composant <v-container>. Dans ce cadre, je vais utiliser le composant <v-layout>. Pour la mise en page, je vais ajouter l'accessoire de colonne. Étant donné que la mise en page est basée sur Flexbox, tout le contenu sera aligné verticalement. Chaque élément de texte sera dans un composant <v-flex>.  

L'en-tête utilisera la classe de typographie Vuetify de display-2. Je veux que ce texte soit centré. Pour le centrer, j'ajoute text-xs-center à la classe. La dernière chose à ajouter est my-5. Cela ajoute une marge le long de l’axe des y, ce qui signifie qu’il ajoute une marge supérieure et une marge inférieure.  Ensuite, je vais créer une autre entrée <v-flex>. Cette entrée aura un titre et un sous-titre de texte. Je veux ajouter un espace blanc autour du texte pour ajouter une classe de mt-3. Cela ajoutera une marge supérieure de 3 à tous les éléments de texte.  Voici mon fichier HomeDetails.vue:

<template>
    <v-container>
        <v-layout column>
            <v-flex  class="display-2 text-xs-center my-5">Big Title Goes Here</v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar risus quis mauris interdum, in euismod nibh pretium. Etiam pulvinar tincidunt dapibus. Quisque sollicitudin, mauris a consequat consectetur, turpis nisl sollicitudin enim, id consectetur neque neque nec metus. Pellentesque dolor nisi, vulputate quis lobortis ac, tincidunt et quam. Mauris pulvinar blandit nisi nec mattis. Aliquam accumsan ut sem eget efficitur. Vivamus in tortor gravida eros laoreet condimentum nec vel dui. Nullam quam massa, ultrices eget tincidunt a, pulvinar ac libero.</p>
            </v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar risus quis mauris interdum, in euismod nibh pretium. Etiam pulvinar tincidunt dapibus. Quisque sollicitudin, mauris a consequat consectetur, turpis nisl sollicitudin enim, id consectetur neque neque nec metus. Pellentesque dolor nisi, vulputate quis lobortis ac, tincidunt et quam. Mauris pulvinar blandit nisi nec mattis. Aliquam accumsan ut sem eget efficitur. Vivamus in tortor gravida eros laoreet condimentum nec vel dui. Nullam quam massa, ultrices eget tincidunt a, pulvinar ac libero.</p>

                <p class="subheading mt-3">Nullam nec massa eu est fringilla lobortis. Praesent in enim in justo blandit varius. Cras placerat arcu in sapien rhoncus aliquet. Sed interdum tortor et tincidunt condimentum. Etiam consequat mi leo, in suscipit odio scelerisque molestie. Nam et purus consequat, iaculis augue vel, sagittis ligula. Vestibulum aliquet vulputate erat. Phasellus id mauris mauris. Nunc a maximus dolor. Curabitur ut vestibulum arcu. Curabitur non lacus justo. Cras varius a magna in semper. Nulla eros ante, consectetur faucibus sapien eu, rhoncus imperdiet dui. Sed viverra iaculis nunc, id pulvinar massa egestas vitae.</p>

                <p class="subheading mt-3">Aenean erat metus, imperdiet eget nisl laoreet, venenatis ultricies ante. In interdum ante vel dictum ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sit amet gravida diam. Aliquam in tempor metus. Fusce pellentesque pharetra sem, et luctus justo tempor dictum. Ut feugiat est sed tristique egestas. Nullam posuere a nunc in blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse laoreet ultrices eros, nec malesuada enim semper sit amet. Maecenas efficitur consectetur accumsan. Etiam in aliquam turpis, ut pharetra nulla. Vestibulum malesuada, nulla id elementum cursus, nibh dui rhoncus felis, suscipit mattis felis enim sed ex. Pellentesque scelerisque aliquam lorem, vel mattis nibh tincidunt ac. Suspendisse ac nibh sit amet lacus ullamcorper maximus.</p>
            </v-flex>
            <v-flex>
                <div class="headline mt-3">Lorem ipsum</div>
                <p class="subheading mt-3">Nullam nec massa eu est fringilla lobortis. Praesent in enim in justo blandit varius. Cras placerat arcu in sapien rhoncus aliquet. Sed interdum tortor et tincidunt condimentum. Etiam consequat mi leo, in suscipit odio scelerisque molestie. Nam et purus consequat, iaculis augue vel, sagittis ligula. Vestibulum aliquet vulputate erat. Phasellus id mauris mauris. Nunc a maximus dolor. Curabitur ut vestibulum arcu. Curabitur non lacus justo. Cras varius a magna in semper. Nulla eros ante, consectetur faucibus sapien eu, rhoncus imperdiet dui. Sed viverra iaculis nunc, id pulvinar massa egestas vitae.</p>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
export default {
    name: 'HomeDetails'
};
</script>

<style scoped>
</style>

Ajout de HomeDetails à l'application

Nous allons ajouter HomeDetails à l'application comme nous l'avons fait pour HomeHero. Ouvrez le fichier Home.vue dans le dossier views. Vous devrez importer le composant HomeDetails. Ajoutez-le ensuite au modèle situé sous HomeHero.  Voici à quoi ressemble le fichier Home.vue:

<template>
    <span>
        <home-hero></home-hero>
        <home-details></home-details>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';
import HomeDetails from '@/components/HomeDetails';

export default {
    name: 'home',
    components: {
        HomeHero,
        HomeDetails
    }
};
</script>

Lorsque nous ajoutons ce nouveau composant, cela pose un problème de mise en page. Maintenant, le texte est centré en fonction de la hauteur totale de l'image ainsi que du nouveau contenu du texte. Voici à quoi cela ressemble:

Problème avec notre mise en page.

Nous pouvons facilement corriger ce problème en spécifiant une hauteur maximale pour le conteneur qui a notre image. Nous voulons que ce conteneur soit à 100% de la hauteur de notre fenêtre.  Ouvrez le fichier HomeHero.vue. Sur le composant <v-container>, ajoutez un style qui définit la hauteur maximale. Voici cette ligne:

<v-container fluid fill-height class="home-hero" style="max-height: 100vh;">

Nous sommes maintenant revenus à une image en plein écran avec notre texte centré sur l'image. Nous pouvons ensuite faire défiler vers le bas pour voir les détails.  

Le contenu

Après les détails, je souhaite ajouter des images des offres de voyages que nous proposons sur notre site Web de voyages extrêmes. Pour mon site Web, je proposerai des plans de voyages de type biking, randonnée ou canyoning. N'hésitez pas à personnaliser votre application pour proposer les meilleurs offres aux clients.  

Créons un nouveau composant. Dans le dossier components, créez un nouveau fichier appelé HomePlans.vue. Nous allons utiliser la disposition de la grille Vuetify. Notre élément racine sera un <v-container>. Nous allons ajouter un nouvel accessoire de grid-list-lg. Nous aurons trois plans de repas côte à côte. Cet accessoire met espacement entre eux.  Ensuite, nous avons un <v-layout> pour notre texte d’en-tête annonçant nos plans de repas disponibles. Nous allons utiliser un nouveau composant Vuetify appelé <v-card>. Notre carte aura une image, le nom du voyage proposé et du texte détaillé. Je vais utiliser des images de unsplash pour chacune des offres.  Voici le code du fichier HomePlans.vue: