Résumé

Dans la première partie de cette série, nous avons créé notre application Vue à l'aide de Vue CLI. Nous avons également ajouté Vuetify à l'application. J'utilise Vuetify pour le style de l'application. Je profiterai également des nombreux composants de l'interface utilisateur proposés.  Après avoir tout installé, nous avons stylisé la page d'accueil de notre application.

Utilisation de Vue Router

Vue routeur fournit la navigation pour notre application. Lorsque vous cliquez sur le bouton SIGN IN, il vous redirigera vers la page pour vous connecter. Lorsque vous cliquez sur le bouton MENU, il vous redirigera vers la page contenant les plans de repas disponibles.  Le fichier router.js contient la configuration pour le routage. Ouvrez ce fichier. Dans ce fichier, vous verrez deux itinéraires. Celui qui affiche le composant Home.vue lorsque vous cliquez sur route ‘/’. L’autre affiche le composant about.vue lorsque vous suivez l’itinéraire ‘about’.  Nous devrons créer des itinéraires pour chaque page de notre application. Notre application aura besoin des itinéraires suivants:

  • /
  • /menu
  • /sign-in
  • /join

Lorsque nous avons utilisé Vue CLI pour créer l'application, nous avons choisi d'installer Vue Router. Par défaut, cela créait des itinéraires pour ‘/’ c'est-à-dire Home et ‘/about’ pour la page à propos. Dans la partie 4, nous utiliserons la page about pour afficher tous les voyages que l'utilisateur a commandé.  Nous devons ajouter trois nouvelles routes au tableau de routes. Après avoir ajouté ces nouvelles routes, voici à quoi ressemble notre fichier router.js:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('./views/About.vue')
        },
        {
            path: '/menu',
            name: 'menu',
            component: () => import('./views/Menu.vue')
        },
        {
            path: '/sign-in',
            name: 'signin',
            component: () => import('./views/Signin.vue')
        },
        {
            path: '/join',
            name: 'join',
            component: () => import('./views/Join.vue')
        }
    ]
});

View vs Components

Dans notre première partie, nous avons créé plusieurs nouveaux composants Vue. J'ai placé ces composants dans le dossier components. Pour ces trois nouveaux composants, nous ne les créerons pas dans le dossier components. Au lieu de cela, nous les placerons dans le dossier views. La raison en est que tout ce qui est frappé en utilisant une URL telle que /menu appartient au dossier views. Tout le reste devrait être dans le dossier components.

Créer de nouvelles views

Nous devons créer de nouvelles vues pour chacun des trois nouveaux itinéraires. Dans le dossier Views, créez les trois fichiers suivants:

  • Menu.vue
  • Signin.vue
  • Join.vue

Dans chacun des fichiers, ajoutez un <v-conteneur> avec un <v-layout>. Dans la mise en page, utilisez une balise <h1> avec le nom de la page.  Voici le fichier Menu.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Menu Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Menu'
};
</script>
<style scoped>
</style>

Voici le fichier signin.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Signin Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Signin'
};
</script>
<style scoped>
</style>

Voici le fichier Join.vue:

<template>
    <v-container fluid>
        <v-layout>
            <h1>Join Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'Join'
};
</script>
<style scoped>
</style>

Rendre les éléments du menu cliquables

Dans notre menu <v-toolbar>, nous avons quatre éléments sur lesquels un utilisateur peut cliquer. Elles sont:  Menu Profil Se connecter Joindre Nous voulons configurer chacun de ceux-ci de sorte que lorsqu'un utilisateur clique dessus, il les dirige vers la page appropriée. Ouvrez le fichier AppNavigation.vue. Dans la section <v-toolbar>, recherchez le <v-btn> ​​du menu. Tout ce que nous avons à faire est d’ajouter à = "/ menu". Nous allons faire cela pour les quatre entrées, mais assurez-vous de spécifier le bon itinéraire que nous avons défini dans le fichier router.js.  Nous n’avons pas d’option de menu pour revenir à la page d’accueil. Nous pouvons résoudre ce problème en faisant le nom de l'application rediriger vers la page d'accueil. Mais le titre n'est pas un bouton, donc ajouter à = "/menu" ne fonctionnera pas. Vue Router offre la possibilité d’entourer un lien avec <router-link to = ”/”>. Nous ferons cela pour le titre de notre application.  

Voici à quoi ressemble mon AppNavigation:

<template>
    <span>
        <v-navigation-drawer app v-model="drawer" class="brown 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="brown 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>
            <router-link to="/">
                <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>
            </router-link>
            <v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down" to="/sign-in">SIGN IN</v-btn>
            <v-btn color="brown lighten-3" class="hidden-sm-and-down" to="/join">JOIN</v-btn>
        </v-toolbar>
    </span>
</template>
<script>
export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'Meal Prep',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Profile' }, 
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};
</script>
<style scoped>
</style>

Lorsque nous faisons cela, nous avons un léger problème avec le titre de notre application dans le menu. C'est le style par défaut pour une balise d'ancrage. Nous pouvons surmonter cela en ajoutant le style suivant:

a {
    color: white;
    text-decoration: none;
}

Nous sommes maintenant de retour là où nous étions. Si vous cliquez sur tous les éléments du menu, ils vous redirigeront vers la page appropriée. Nous n'avons qu'un léger problème avec le fichier About.vue. Ce fichier affiche le contenu différemment. Pour que nous ayons une cohérence, mettez à jour le fichier About.vue afin qu'il soit comme suit:

<template>
    <v-container fluid>
        <v-layout>
            <h1>About Page</h1>
        </v-layout>
    </v-container>
</template>
<script>
export default {
    name: 'About'
};
</script>
<style scoped>
</style>

Résumé

Dans cette partie de cette série, vous avez appris:  

  • comment fonctionne Vue Router
  • comment charger de nouvelles routes
  • comment configurer le menu pour charger chaque page

Conclusion

Et voilà une belle application créée avec VueJS, désormais nous allons nous intéresser à la dockerisation de notre application et éventuellement à un déploiement sur Kubernetes.