Heim > Artikel > PHP-Framework > Ausführliche Erklärung zur Bereitstellung von Vue in Laravel

Ausführliche Erklärung zur Bereitstellung von Vue in Laravel

藏色散人nach vorne: 2021-10-28 15:48:447814Durchsuche

Laravel+vue-Umgebungsbereitstellung

Dieses Tutorial stellt die Bereitstellung von Vue in Laravel vor und enthält einige grundlegende Gerüste, um den Einstieg in das Schreiben von modernem JavaScript mithilfe der Vue-Bibliothek zu erleichtern. Vue bietet eine ausdrucksstarke API zum Erstellen leistungsstarker JavaScript-Anwendungen mithilfe von Komponenten. Wir können Laravel Mix verwenden, um JavaScript-Komponenten einfach in eine browserfähige JavaScript-Datei zu kompilieren.

Verwandte Empfehlungen: Die neuesten fünf Laravel-Video-Tutorials, Die neuesten fünf ausgewählten Vue.js-Video-Tutorials

Laravel erstellen

Zuerst benötigen Sie einen Komponisten und dann Sie Mit einem Laravel. Führen Sie den Befehl „composer create-project --prefer-dist laravel/laravel blog“ aus, um ein neues Laravel-Projekt zu erstellen (bitte besuchen Sie die offizielle Website, um zu erfahren, wie Sie speziell Laravel erstellen).

Hallo Welt!

Öffnen Sie die Befehlszeile und geben Sie Ihren Projekt-CD-Blog ein.

Bevor Sie beginnen, kann npm als Fremdknoten-Warehouse-Installationstool während des Betriebs langsam sein Bei verschiedenen Problemen wie Langsamkeit wird im Allgemeinen empfohlen, die Taobao-Quelle zur Beschleunigung zu verwenden. Der folgende Code kann auch mit einem Suffix hinzugefügt werden. Der Code lautet wie folgt.

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

Laden Sie die Vue-Routing-Verwaltung herunter. Der Code lautet wie folgt.

npm install vue-router --save-dev

Erstellen Sie eine neue benutzerdefinierte Komponentendatei HelloComponent.vue in /resources/assets/js/components. Der Code lautet wie folgt.

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

Erstellen Sie einen neuen Ordner router unter /resources/assets/js, erstellen Sie darin hello.js und ordnen Sie die Hallo-Route der neu erstellten HelloComponent-Komponente über die verschachtelte Routing-Konfiguration zu.

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))
        },
    ]
})

Erstellen Sie unter /resources/assets/js im aktuellen Laravel-Projekt eine neue hello.vue als Hauptschnittstelle und verschachtelte Routing-Ansicht. Der Code lautet wie folgt.

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

Dann erstellen Sie hello.js unter /resources/assets/js, der Code lautet wie folgt.

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)
});

Erstellen Sie eine neue hello.blade.php unter /resources/views mit dem folgenden Code.

<!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>

Fügen Sie eine neue Route in /resources/routes/web.php hinzu. Der Code lautet wie folgt.

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

Ändern Sie webpack.mix.js. Der Code lautet wie folgt.

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;);

Führen Sie nach dem Speichern npm run watch im Projektverzeichnis in der Befehlszeile aus, um es neu zu kompilieren.

Sie können php artisan Serve in das Projektverzeichnis in der Befehlszeile eingeben und http://127.0.0.1:8000/hello aufrufen . Sie können den Effekt sehen

Laravel 5.5 hat die Methoden Route::view und Route::redirect für 5.4 und darunter hinzugefügt: Route::get('/hello', function () {return view( ' hallo');});

Endlich

Manchmal wird beim Ausführen von npm ein Write EIO-Fehler angezeigt, der durch Codierungsprobleme verursacht werden kann. In diesem Fall können Sie die Befehlszeilendatei als Administrator ausführen , oder führen Sie chcp 850 Settings Active Code Page Number aus. Das Tutorial zum Bereitstellen von Vue in Laravel ist im Grunde beendet. Wenn Sie mehr über das Schreiben von Vue-Komponenten erfahren möchten, können Sie die Vue-Dokumentation lesen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Bereitstellung von Vue in Laravel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.im. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Analysieren Sie die Verwendung des Laravel-EreignissystemsNächster Artikel：Analysieren Sie die Verwendung des Laravel-Ereignissystems

In Verbindung stehende Artikel

Mehr sehen