Hat Laravel Vue integriert?

Laravel verfügt nicht über integriertes Vue; Laravel ist ein in PHP-Sprache geschriebenes Webprogramm-Entwicklungsframework, und Vue ist ein Open-Source-JavaScript-Framework, das zum Erstellen von Benutzeroberflächen verwendet wird, aber es gibt kein integriertes. im vue in laravel.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Laravel Version 9, Dell G3-Computer.

Verfügt Laravel über integriertes Vue?

Laravel ist ein in PHP-Sprache geschriebenes Webprogramm-Entwicklungsframework. Ziel ist es, Entwicklern gemeinsame Komponenten zur Verfügung zu stellen und die Entwicklung von Webprogrammen zu vereinfachen. Indem Sie weniger Code schreiben, können Sie Funktionen erreichen, die mit anderen Programmiersprachen oder Frameworks nur schwer zu erreichen sind. Erfahrene PHP-Programmierer werden feststellen, dass die Programmentwicklung mit Laravel mehr Spaß macht.

vue ist ein Open-Source-JavaScript-Framework zum Erstellen von Benutzeroberflächen und ein Webanwendungs-Framework zum Erstellen von Einzelseitenanwendungen. Der Schwerpunkt von Vue liegt auf der Ansichtsebene im MVC-Muster. Gleichzeitig können damit auch problemlos Daten abgerufen werden Aktualisierungen und die Interaktion zwischen der Ansicht und dem Modell durch spezifische Methoden innerhalb der Komponente realisieren.

Laravel

Laravel ist ein ausdrucksstarkes Webanwendungs-Framework mit prägnanter Syntax. Wir glauben, dass der Entwicklungsprozess eine angenehme und kreative Erfahrung sein sollte. Laravel ist bestrebt, die Unannehmlichkeiten während des Entwicklungsprozesses zu reduzieren. Deshalb stellen wir Tools oder Funktionen bereit, die im Entwicklungsprozess häufig verwendet werden, wie z. B. Authentifizierung, Routing, Sitzungen und Caching.

Laravels Ziel ist es, einen angenehmen Entwicklungsprozess für Entwickler zu schaffen, ohne auf die Funktionalität der Anwendung zu verzichten. Glückliche Entwickler erstellen den besten Code. Zu diesem Zweck haben wir die Vorteile verschiedener Frameworks genutzt und sie in Laravel konzentriert. Zu diesen Frameworks gehören unter anderem Ruby on Rails, ASP.NET MVC und Sinatra.

vue

Vue.js (/vjuː/, oder einfach Vue) ist ein Open-Source-JavaScript-Framework zum Erstellen von Benutzeroberflächen und ein Webanwendungs-Framework zum Erstellen von Single-Page-Anwendungen. Eine JavaScript-Umfrage aus dem Jahr 2016 ergab, dass Vue eine Entwicklerzufriedenheit von 89 % hatte. Auf GitHub erhält das Projekt durchschnittlich 95 Sterne pro Tag und ist damit das Projekt mit den dritthäufigsten Sternen in der Geschichte von Github.

Vue.js ist ein beliebtes JavaScript-Frontend-Framework, das entwickelt wurde, um die Webentwicklung besser zu organisieren und zu vereinfachen. Der Schwerpunkt von Vue liegt auf der Ansichtsebene im MVC-Muster. Gleichzeitig können Datenaktualisierungen problemlos abgerufen und die Interaktion zwischen Ansicht und Modell mithilfe spezifischer Methoden innerhalb der Komponente realisiert werden.

So stellen Sie Vue in Laravel bereit

Laravel erstellen

Zuerst benötigen Sie einen Composer und dann haben Sie ein 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 Es wird allgemein 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 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: '/',
            component: resolve =>void(require(['../components/HelloComponent.vue'], 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('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
    el: '#app',
    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('/hello','/hello');

Ändern Sie webpack.mix.js, der Code lautet wie folgt.

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

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

【Verwandte Empfehlung: Laravel-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonHat Laravel Vue integriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!