Maison > Article > cadre php > Explication détaillée de la façon de déployer vue dans Laravel

Explication détaillée de la façon de déployer vue dans Laravel

藏色散人avant: 2021-10-28 15:48:447814parcourir

Déploiement de l'environnement Laravel+vue

Ce tutoriel présente le déploiement de vue dans Laravel comprend des échafaudages de base pour faciliter le démarrage de l'écriture de JavaScript moderne à l'aide de la bibliothèque Vue. Vue fournit une API expressive pour créer de puissantes applications JavaScript à l'aide de composants. Nous pouvons utiliser Laravel Mix pour compiler facilement des composants JavaScript dans un fichier JavaScript prêt pour le navigateur.

Recommandations associées : Les cinq derniers didacticiels vidéo Laravel, Les cinq derniers didacticiels vidéo vue.js sélectionnés

Créer un laravel

Tout d'abord, vous avez besoin d'un compositeur, et ensuite, vous Avec un laravel. Exécutez la commande composer create-project --prefer-dist laravel/laravel blog pour créer un nouveau projet laravel (veuillez vous rendre sur le site officiel pour savoir comment créer spécifiquement Laravel).

Bonjour tout le monde !

Ouvrez la ligne de commande et entrez le blog du cd de votre projet

Avant de commencer, pour diverses raisons que vous connaissez, npm, en tant qu'outil d'installation d'entrepôt de nœuds étrangers, peut être lent pendant le fonctionnement. divers problèmes tels que la lenteur, il est généralement recommandé d'utiliser la source taobao pour l'accélération. Le code suivant peut également être ajouté avec un suffixe. Le projet téléchargé en dépend par défaut.

npm install  --registry=https://registry.npm.taobao.org

Téléchargez la gestion du routage de vue, le code est le suivant.

npm install vue-router --save-dev

Créez un nouveau fichier de composant personnalisé HelloComponent.vue dans /resources/assets/js/components, le code est le suivant.

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Créez un nouveau routeur de dossier sous /resources/assets/js, créez-y hello.js et mappez la route hello au composant HelloComponent nouvellement créé via une configuration de routage imbriquée. Le code est le suivant.

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], resolve))
        },
    ]
})

Créez un nouveau hello.vue sous /resources/assets/js dans le projet laravel actuel comme interface principale et vue de routage imbriquée. Le code est le suivant.

<template>
    <div>
        <h1>Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Ensuite, créez hello.js sous /resources/assets/js, le code est le suivant.

require(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    router,
    render: h=>h(App)
});

Créez un nouveau hello.blade.php sous /resources/views avec le code suivant.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

Ajoutez une nouvelle route dans /resources/routes/web.php, le code est le suivant.

Route::view(&#39;/hello&#39;,&#39;/hello&#39;);

Modifiez webpack.mix.js, le code est le suivant.

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);

Après l'enregistrement, exécutez npm run watch dans le répertoire du projet sur la ligne de commande pour recompiler

Vous pouvez entrer php artisan serve dans le répertoire du projet sur la ligne de commande et visiter http://127.0.0.1:8000/hello. . Vous pouvez voir l'effet

Laravel 5.5 a ajouté les méthodes Route::view et Route::redirect Les routes pour 5.4 et versions antérieures peuvent être écrites comme ceci Route::get('/hello', function () {return view(. 'bonjour');});

Enfin

Parfois, lors de l'exécution de npm, une erreur d'écriture EIO s'affichera, ce qui peut être dû à des problèmes d'encodage. Dans ce cas, vous pouvez exécuter le fichier de ligne de commande en tant qu'administrateur. , ou exécutez chcp 850 settings Numéro de page de code actif, le didacticiel sur le déploiement de Vue dans Laravel est pratiquement terminé. Si vous souhaitez en savoir plus sur l'écriture de composants Vue, vous pouvez lire la documentation de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript laravel composer vue.js npm webpack JS function http

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Analyser l'utilisation du système d'événements LaravelArticle suivant：Analyser l'utilisation du système d'événements Laravel

Articles Liés

Voir plus