Heim > PHP-Framework > Laravel > Hauptteil

Hat Laravel Vue integriert?

WBOY
Freigeben: 2022-09-01 17:09:38
Original
1922 Leute haben es durchsucht

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.

Hat Laravel Vue integriert?

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
Nach dem Login kopieren

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

npm install vue-router --save-dev
Nach dem Login kopieren

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>
Nach dem Login kopieren

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))
        },
    ]
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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)
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

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(&#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;);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!