Scribd Logo
Importer

Bienvenue sur Scribd !

  • Atelier 3 Installation Et Mise en Place

    Transféré par

    Ons Hadrich
    39 vues6 pages

    Titre original

    Atelier 3 Installation et mise en place

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    39 vues6 pages

    Atelier 3 Installation Et Mise en Place

    Transféré par

    Ons Hadrich

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Atelier 3 : Installation et mise en place de

    VueJs dans Laravel 10 avec vite

    Cet atelier démontre l'intégration de Vue dans Laravel à l'aide de Vite, rationalisant ainsi le
    développement d'interfaces utilisateur dynamiques.

    Ouvrir le projet Laravel Ecommerce

    Installer vue et vite vue-plugin

    Dans l’invite de commande au niveau du terminal du projet créé taper les commandes
    suivantes :

    npm i

    npm install vue@next vue-loader@next

    installer ensuite le plugin vue.js

    npm i @vitejs/plugin-vue

    La commande npm i @vitejs/plugin-vue installe le plugin Vue.js pour Vite dans votre projet. Ce
    plugin est essentiel si vous souhaitez développer des applications Vue.js avec Vite, car il permet à
    Vite de traiter correctement les fichiers Vue et d'optimiser le processus de développement.

    Une fois le plugin Vue.js installé, vous pouvez l'ajouter dans votre fichier vite.config.js pour
    l'utiliser dans votre projet.

    1
    MAJ de vite.config.js

    import { defineConfig } from 'vite';


    import laravel from 'laravel-vite-plugin';
    import vue from '@vitejs/plugin-vue'

    export default defineConfig({


    plugins: [
    vue(),
    laravel({
    input: ['resources/css/app.css', 'resources/js/app.js'],
    refresh: true,
    }),
    ],
    });

    Créer une route dynamique

    Route::get('/{any}', function () {
    return view('layout.app');
    })->where('any', '.*');

    Ce code crée une route dans Laravel qui correspond à n'importe quelle URL et renvoie la vue
    layout.app. Cette approche est souvent utilisée dans les applications à une seule page (SPA) où le
    routage côté serveur est géré par le framework frontend (comme Vue.js ou React) et non par le
    serveur web.

    2
    Créer app.blade.php
    Sous resources/views créer le dossier layout

    Sous resources/views/layout créer le fichier app.blade.php

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Application</title>

    </head>

    <body>
    <div id="app"></div>
    @vite('resources/js/app.js')
    </body>

    </html>

    Explication :

    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    Cette ligne de code génère l'attribut lang de la balise <html> en fonction de la locale actuellement
    configurée pour l'application, en remplaçant les tirets bas par des tirets pour se conformer aux normes de
    codification des langues. Cela permet aux navigateurs et aux moteurs de recherche de connaître la langue
    principale de la page.
    @vite('resources/js/app.js')

    Cette ligne de code indique à Vite d'intégrer le fichier JavaScript 'resources/js/app.js' dans le
    processus de construction de l'application web.

    Installer les dépendances

    npm i bootstrap

    3
    npm install vue-router

    Créer un composant

    Sous resources/js, créer le dossier components puis le fichier accueil.vue

    <template>
    <div class="container">
    <div class="row justify-content-center">
    <div class="col-md-8">
    <div class="card">
    <div class="card-header">Bienvenue dans notre site</div>

    <div class="card-body">
    Vous êtes à la page d'accueil
    </div>
    </div>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default {
    mounted() {
    console.log('Component mounted.')
    }
    }
    </script>

    Créer routes.js
    Sous resources/js créer le fichier routes.js

    import Accueil from './components/accueil.vue';

    export const routes = [


    {
    name: 'accueil',
    path: '/',
    component: Accueil
    }
    ];

    4
    Créer App.vue

    Sous resources/js créer le fichier App.vue

    <template>

    <router-view> </router-view>

    </template>

    MAJ resources/js/app.js

    import { createApp } from 'vue';


    import { createRouter, createWebHashHistory } from "vue-router";
    import { routes } from "./routes";
    import 'bootstrap/dist/css/bootstrap.min.css'

    import App from './App.vue'


    let app = createApp(App)

    const router = createRouter({


    history: createWebHashHistory(),
    routes: routes,
    })

    app.use(router);
    app.mount("#app")

    createRouter : C'est une fonction fournie par Vue Router, un module de routage officiel pour les
    applications Vue.js. Elle est utilisée pour créer une nouvelle instance de router.

    createWebHistory() : C'est une fonction de Vue Router qui crée un historique de navigation basé
    sur l'historique de navigation HTML5. Cela signifie que l'application utilise les fonctionnalités de
    l'historique de navigation du navigateur pour gérer les changements de page sans rechargement
    complet de la page.

    5
    routes: routes : C'est un objet qui définit les routes de votre application. routes semble être une
    variable ou une constante préalablement définie, contenant la configuration des routes de votre
    application.

    app.use(router) : Cette ligne indique à l'application Vue d'utiliser le router que vous avez créé. Cela
    lie le router à votre application, permettant à l'application de gérer les différentes routes définies
    dans routes.

    app.mount("#app") : Cette ligne monte l'application Vue sur l'élément avec l'ID app dans votre
    HTML. Cela signifie que le contenu généré par l'application Vue sera rendu à l'intérieur de cet
    élément dans votre page HTML. C'est là que votre application sera affichée à l'utilisateur.

    Exécuter les commandes


    Dans deux terminaux différents exécuter :

    php artisan serve

    npm run dev

    Dans le navigateur ouvrir l’url :

    http://localhost.:8000/

    Vous aimerez peut-être aussi