Jak zkombinovat router VueJS s Laravelem

Jsem velkým fanouškem Laravelu a ráda kóduji, kdykoli mám nějaký volný čas. V poslední době jsem také začal s VueJS, což rozhodně dává větší smysl, když chcete nabídnout velmi bohatý a dynamický uživatelský zážitek. Jednou z mých největších výzev bylo zkombinovat koncepty směrování VueJS Router a Laravel. Chtěl jsem použít Laravel back-end a ověřovací metody, ale také jsem chtěl použít VueJS pro některé dynamičtější části. Samozřejmě můžeme přidat každou šablonu a prvky skriptu VueJS do každého vytvořeného listu, ale výsledkem je, že pokaždé, když se stránka znovu načte. To není něco, co chceme. Chceme použít Vue Resource k vytvoření aplikace bez nutnosti znovu načíst pokaždé, když změníme trasu. Jak to můžeme udělat, když pracujeme s Laravelem?

Nejprve musíme mít NodeJS. Stáhněte si instalaci z webu NodeJS nebo pomocí příkazového řádku nainstalujte NodeJS. Také se ujistěte, že používáte Laravel 5.4 nejméně. Po instalaci NodeJS se ujistěte, že oba tyto příkazy fungují:

uzel -v
npm -v

Dalším krokem je instalace všech příslušných balíčků:

Npm instalace

Pokud používáte Windows, možná budete muset spustit také následující příkaz, abyste nainstalovali všechny relevantní balíčky sestavení:

Npm install - global - production windows-build-tools

Dalším krokem je, že do našeho projektu přidáme VueJS. Spusťte následující příkaz:

npm install vue

Kromě toho chceme také nainstalovat komponentu vue-router. Spusťte následující příkaz:

npm install vue-router

Můžete také použít my package.json a znovu spustit příkaz npm install.

{
  "private": true,
  "skripty": {
    "dev": "npm run development",
    "vývoj": "cross-env NODE_ENV = vývojové uzly_modulů / webpack / bin / webpack.js --progress --hide-modules --config = uzly_modules / laravel-mix / setup / webpack.config.js",
    "watch": "cross-env NODE_ENV = vývojové uzly_modulů / webpack / bin / webpack.js --watch --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js",
    "watch-poll": "npm run watch - --watch-poll",
    "hot": "cross-env NODE_ENV = vývoj node_modules / webpack-dev-server / bin / webpack-dev-server.js --inline --hot --config = node_modules / laravel-mix / setup / webpack.config. js ",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV = production node_modules / webpack / bin / webpack.js --progress --hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js"
  },
  "devDependencies": {
    "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"
  },
  "závislosti": {
    "vue-router": "^ 2.7.0"
  }
}

Pokud všechno funguje, je čas vytvořit komponenty VueJS. Používám zde velmi snadný příklad. V trasovém souboru mám komponentu Home a další komponentu s názvem Příklad. Vytvořte následující soubor:

resources / resources / js / vue-app.js (Používám vue-app.js, protože pravděpodobně existuje pravděpodobně aplikace app.js)

importovat Vue z 'vue'
importovat VueRouter z 'vue-router';
importovat Home z './components/Home.vue';
importovat {route} z './routes';
Vue.use (VueRouter);
const router = new VueRouter ({
    režim: 'historie',
    trasy
});
nová Vue ({
  el: '#app',
  router
});

Dalším krokem je vytvoření souboru s trasami: resources / resources / js / roads.js

Upozorňujeme, že zde používám adresář / vue /. Můžete přidat mnoho adresářů, ale musíte si uvědomit, že později v tomto tutoriálu donutíme Laravela, aby tuto cestu znovu nenačetl. VueJS odtud v zásadě převezme směrovací část.

importovat Home z './components/Home.vue';
importovat příklad z './components/Example.vue';
export const trasy = [
    {path: '/ vue', komponenta: Home, name: 'Home'},
    {path: '/ vue / example', komponenta: Example, name: 'Example'}
];

Jak vidíte, máme zde zaregistrovanou komponentu Home a také komponentu Example.

Dalším krokem je vytvoření dalších dvou souborů. Vytvořte následující adresář: resources / resources / js / components / a vytvořme náš první komponentu Vue s názvem Home.Vue

Jak vidíte, jedná se o velmi jednoduchou součást a zobrazí se pouze načtení domovské komponenty. Dalším krokem je vytvoření komponenty Příklad. Vytvořte další soubor s názvem Example.Vue

Opět velmi jednoduchá součást pro ověření, že trasa funguje.

Dalším krokem je, že potřebujeme trochu upravit směrování Laravelu. Otevřete soubor app / Http / route.php a do projektu přidejte následující řádky. To přinutí Laravel, aby při každé změně trasy znovu nenahrával aplikaci. Laravelovo směrování je nyní zastaveno a VueJS ho odtud může převzít.

Trasa :: get ('/ vue / {vue_capture?}', Function () {
 zpětné zobrazení ('vue.index');
}) -> kde ('vue_capture', '[\ / \ w \ .-] *');

Dalším krokem je vytvoření vstupní stránky, ze které budou zobrazeny všechny komponenty VueJS. Můžete vytvořit něco, co se nazývá zdroje / zobrazení / vue / index.blade.php


@extends ('layouts.app')
@section ('content')

Toto je komponenta vue

 
    
 
@endekce

Zahrnuji zde své rozvržení.app, které má navbar a všechny další související věci. V rámci obsahu načítáme komponentu Vue JS a také zobrazujeme zobrazení routeru.

Už tam skoro jsme. Posledním krokem je, že musíme nakonfigurovat konfiguraci webpacku. K nasazení použijeme Laravel Mix. Zkontrolujte, zda je k dispozici následující soubor: webpack.mix.js

Měl by mít následující obsah:

let mix = vyžadují („laravel-mix“);
mix.js ('resources / asset / js / vue-app.js', 'public / js');

Toto zavolá laravel-mix, zkompiluje soubor vue-app.js a nasadí jej do souboru public / js.

Nyní jsme všichni připraveni. Udělejme nasazení:

npm běh výroby

Pokud nasazení proběhlo v pořádku, měli byste mít možnost vidět soubor ve veřejné složce / js. Nyní otevřete aplikaci a přejděte na http: // localhost / vue. Localhost se samozřejmě může lišit v závislosti na konfiguraci vašeho prostředí. Pokud by všechno šlo dobře, měli byste vidět, že je VueJS načten. Když použijete adresu URL pro komponentu příklad, měla by se načíst komponenta Příklad. Pěkná část je, že stránka není obnovena! Pokud tedy máte v úmyslu vytvořit jednostránkovou aplikaci s různými komponenty pomocí směrovače vue, mohou všechny spolupracovat, dokud zůstanete v podadresáři vue. Použití jiného podadresáře může stránku a všechny součásti znovu načíst. Pokud to nechcete, zkontrolujte, zda je soubor route.php správně nakonfigurován.