Sådan kombineres VueJS Router med Laravel

Jeg er en stor fan af Laravel og kan lide at kode når jeg har lidt fritid. For nylig startede jeg også med VueJS, som bestemt giver mere mening, når du vil tilbyde en meget rig og dynamisk brugeroplevelse. En af mine største udfordringer har været at kombinere både VueJS Router og Laravel routingkoncepter. Jeg ønskede at bruge de leverede Laravel-back-end- og godkendelsesmetoder, men jeg ønskede også at bruge VueJS til nogle mere dynamiske dele. Vi kan naturligvis tilføje VueJS-skabelonen og scriptelementerne til hvert blad, vi opretter, men resultatet er, at hver gang siden genindlæses. Dette er ikke noget, vi ønsker. Vi ønsker at bruge Vue Resource til at oprette en applikation uden at skulle genindlæses hver gang vi ændrer ruten. Hvordan kan vi gøre det, når vi arbejder med Laravel?

Til at begynde med er vi nødt til at have NodeJS. Download din installation fra NodeJS-webstedet, eller brug kommandolinjen til at installere NodeJS. Sørg også for, at du mindst bruger Laravel 5.4. Efter installationen af ​​NodeJS skal du sørge for, at begge disse kommandoer fungerer:

knude -v
npm -v

Det næste trin er at installere alle relevante pakker:

npm installation

Hvis du bruger Windows, skal du muligvis også køre følgende kommando for at installere alle relevante build-pakker:

npm installation - global - produktionsvinduer-build-værktøjer

Næste trin er, at vi tilføjer VueJS til vores projekt. Kør følgende kommando:

npm installation vue

Derudover ønsker vi også, at vue-router-komponenten skal installeres. Kør følgende kommando:

npm installere Vue-router

Du kan også bruge min package.json og køre npm installationskommandoen igen.

{
  "privat": sandt,
  "scripts": {
    "dev": "npm køreudvikling",
    "udvikling": "cross-env NODE_ENV = udvikling node_moduler / webpack / bin / webpack.js --progress - skjul-moduler --config = node_modules / laravel-mix / setup / webpack.config.js",
    "watch": "cross-env NODE_ENV = udviklingsnode_moduler / webpack / bin / webpack.js - watch --progress - skjul-moduler --config = node_modules / laravel-mix / setup / webpack.config.js",
    "watch-poll": "npm run watch - - watch-poll",
    "hot": "cross-env NODE_ENV = udvikling node_moduler / webpack-dev-server / bin / webpack-dev-server.js --inline --hot --config = node_modules / laravel-mix / setup / webpack.config. js",
    "prod": "npm køre produktion",
    "produktion": "cross-env NODE_ENV = produktionsnode_moduler / webpack / bin / webpack.js --progress - skjul-moduler --config = node_modules / laravel-mix / setup / webpack.config.js"
  },
  "afhængighed": {
    "axios": "^ 0.16.2",
    "bootstrap-sass": "^ 3.3.7",
    "cross-env": "^ 5.0.5",
    "jquery": "^ 3.1.1",
    "laravel-mix": "^ 1.0",
    "lodash": "^ 4.17.4",
    "vue": "^ 2.1.10"
  },
  "afhængigheder": {
    "vue-router": "^ 2.7.0"
  }
}

Hvis alt fungerer, er det tid til at oprette VueJS-komponenterne. Jeg bruger et meget let eksempel her. Jeg har hjemmekomponent og en anden komponent kaldet eksempel i rutefilen. Opret følgende fil:

ressourcer / aktiver / js / vue-app.js (jeg bruger vue-app.js, fordi app.js sandsynligvis allerede findes)

import Vue fra 'vue'
importer VueRouter fra 'vue-router';
import hjem fra './components/Home.vue';
import {ruter} fra './routes';
Vue.use (VueRouter);
const router = ny VueRouter ({
    tilstand: 'historie',
    ruter
});
ny Vue ({
  el: '#app',
  router
});

Det næste trin er at oprette rutefilen: ressourcer / aktiver / js / routes.js

Bemærk, at jeg bruger / vue / biblioteket her. Du kan tilføje mange mapper, men du skal være opmærksom på, at vi senere i denne tutorial vil tvinge Laravel til ikke at genindlæse denne rute. VueJS overtager dybest set routingdelen herfra.

import hjem fra './components/Home.vue';
importeksempel fra './components/Example.vue';
eksporter konstruter = [
    {sti: '/ vue', komponent: Hjem, navn: 'Hjem'},
    {sti: '/ vue / eksempel', komponent: Eksempel, navn: 'Eksempel'}
];

Som du kan se, har vi hjemmekomponenten og også eksemplekomponenten registreret her.

Næste trin er at oprette to filer mere. Opret følgende bibliotek: ressourcer / aktiver / js / komponenter / og lad os oprette vores første Vue-komponent, kaldet Home.Vue


    @ {{message}}
     <( url til eksempel  
@endsection

Jeg inkluderer her mine layouts.app, der har navbaren og alle de andre relaterede ting. Inden for indholdet indlæser vi Vue JS-komponenten og viser også router-visningen.

Vi er næsten der. Sidste trin er, at vi er nødt til at konfigurere webpack-konfigurationen. Vi bruger Laravel Mix til installationen. Sørg for, at følgende fil er til stede: webpack.mix.js

Det skal have følgende indhold:

lad mix = kræve ('laravel-mix');
mix.js ('ressourcer / aktiver / js / vue-app.js', 'public / js');

Dette vil kalde laravel-mix, kompilere vue-app.js og distribuere den i filen public / js.

Nu er vi i orden. Lad os udføre implementeringen:

npm køre produktion

Hvis installationen gik fint, skal du være i stand til at se en fil i mappen public / js. Åbn nu din ansøgning og gennemsøg http: // localhost / vue. Localhost kan selvfølgelig være anderledes, afhængigt af hvordan dit miljø er konfigureret. Hvis alt gik godt, skal du være i stand til at se, at VueJS er indlæst. Når du bruger url'en til eksempelkomponenten, skal Eksempelkomponenten indlæses. Den fine del her er, at siden ikke opdateres! Så hvis din intention er at opbygge en enkelt sides applikation med forskellige komponenter ved hjælp af vue-routeren, kan det hele arbejde sammen, så længe du forbliver inden for undervirksomheden til vue. Brug af en anden undermappe mapper muligvis siden og alle komponenter, der skal indlæses igen. Hvis du ikke ønsker dette, skal du sørge for, at filen routes.php er konfigureret korrekt.