Как да комбинирате рутера VueJS с Laravel

Аз съм голям фен на Laravel и обичам да кодирам всеки път, когато имам свободно време. Съвсем наскоро започнах и с VueJS, което определено има повече смисъл, когато искате да предложите много богато и динамично потребителско изживяване. Едно от най-големите ми предизвикателства беше да комбинирам концепциите за маршрутизация на VueJS и Laravel. Исках да използвам предоставените методи за бек-енд и автентификация на Laravel, но също така исках да използвам VueJS за някои по-динамични части. Разбира се, можем да добавим VueJS шаблон и елементи на скрипт към всеки създаден от нас блат, но резултатът е, че всеки път страницата ще бъде презареждана. Това не е нещо, което искаме. Искаме да използваме Vue Resource, за да създадем приложение, без да е необходимо да презареждаме всеки път, когато променяме маршрута. Как можем да направим това, когато работим с Laravel?

За начало трябва да имаме NodeJS. Изтеглете вашата инсталация от уебсайта на NodeJS или използвайте командния ред, за да инсталирате NodeJS. Уверете се също, че използвате най-малко Laravel 5.4. След инсталирането на NodeJS, уверете се, че и двете команди работят:

възел -v
npm -v

Следващата стъпка е да инсталирате всички съответни пакети:

npm инсталиране

Ако използвате Windows, може да се наложи да изпълните следната команда, за да инсталирате всички подходящи пакети за сглобяване:

npm install - глобално - производство на windows-build-tools

Следваща стъпка е, че ще добавим VueJS към нашия проект. Изпълнете следната команда:

npm инсталирайте vue

В допълнение ние също така искаме да има инсталиран компонент vue-router. Изпълнете следната команда:

npm инсталирайте vue-router

Можете също да използвате моя package.json и отново да стартирате командата npm install.

{
  "частно": вярно,
  "скриптове": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV = разработка node_modules / webpack / bin / webpack.js - напредък --hide-модули --config = node_modules / laravel-mix / setup / webpack.config.js",
    "watch": "cross-env NODE_ENV = разработка node_modules / webpack / bin / webpack.js --watch --progress --hide-module --config = node_modules / laravel-mix / setup / webpack.config.js",
    "watch-anketa": "npm run watch - - гледайте анкета",
    "hot": "cross-env NODE_ENV = разработка 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 = производство node_modules / webpack / bin / webpack.js --progress --hide-модули --config = node_modules / laravel-mix / setup / webpack.config.js"
  }
  "devDependitions": {
    "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"
  }
  "зависимости": {
    "vue-router": "^ 2.7.0"
  }
}

Ако всичко работи, е време да създадете компонентите на VueJS. Използвам много лесен пример тук. Имам компонент Home и друг компонент, наречен Example във файла с маршрути. Създайте следния файл:

ресурси / активи / js / vue-app.js (използвам vue-app.js, защото вероятно приложението.js вече съществува)

импортиране Vue от 'vue'
импортиране на VueRouter от 'vue-router';
import Home от './components/Home.vue';
import {route} от „./routes“;
Vue.use (VueRouter);
const рутер = нов VueRouter ({
    режим: „история“,
    маршрути
});
ново Vue ({
  el: '#app',
  рутер
});

Следваща стъпка е да създадете файла с маршрути: ресурси / активи / js / route.js

Моля, обърнете внимание, че тук използвам / vue / директорията. Можете да добавите много директории, но трябва да сте наясно, че по-късно в този урок ще принудим Laravel да не презарежда този маршрут. VueJS ще поеме основната част от маршрута оттук.

import Home от './components/Home.vue';
Пример за импортиране от './components/Example.vue';
износ const маршрути = [
    {path: '/ vue', компонент: Начало, име: 'Начало'},
    {path: '/ vue / example', компонент: Example, name: 'Example'}
];

Както можете да видите, ние имаме Home компонент, а също и компонент Example, регистриран тук.

Следващата стъпка е да създадете още два файла. Създайте следната директория: ресурси / активи / js / компоненти / и нека създадем първия си Vue Component, наречен Home.Vue

<Шаблон>
    @ {{message}}
      url to example  
<Скрипт>
експортиране по подразбиране {
  данни () {
    връщане {
      съобщение: „Това е домашният компонент!“
    };
  }
};

Както можете да видите, това е много прост компонент и ще показва само, че домашният компонент е зареден. Следващата стъпка е да създадете компонента Example. Създайте друг файл, наречен Example.Vue

<Шаблон>
   

Това показва, че маршрутът наистина работи !!

   @ {{message}}     Назад към корен
<Скрипт>
експортиране по подразбиране {
  данни () {
    връщане {
      съобщение: 'Hoera !!!!'
    };
  }
};

Отново много прост компонент за потвърждаване, че маршрутът работи.

Следващата стъпка е, че трябва малко да коригираме маршрутизацията на Laravel. Отворете приложението / Http / route.php файла и добавете следните редове към вашия проект. Това ще принуди Laravel да не презарежда приложението при всяка промяна на маршрута. Маршрутизацията на Laravel вече е спряна и VueJS може да я поеме от тук.

Маршрут :: get ('/ vue / {vue_capture?}', Function () {
 изглед за връщане ('vue.index');
}) -> къде ('vue_capture', '[\ / \ w \ .-] *');

Следващата стъпка е да създадете целевата страница, от която ще бъдат обслужвани всички компоненти на VueJS. Можете да създадете нещо, наречено ресурси / views / vue / index.blade.php


@extends ( "layouts.app)
@section ( "съдържание")

Това е компонент vue

 
  <Рутер изглед>    
@endsection

Включвам тук моя layout.app, който има навигационната лента и всички други свързани неща. В рамките на съдържанието зареждаме компонента Vue JS и също така показваме изгледа на рутера.

Почти сме там. Последната стъпка е, че трябва да конфигурираме конфигурацията на уебпакета. Ще използваме Laravel Mix за внедряването. Уверете се, че е налице следният файл: webpack.mix.js

Тя трябва да има следното съдържание:

нека микс = изисквам ('laravel-mix');
mix.js ('ресурси / активи / js / vue-app.js', 'public / js');

Това ще извика laravel-mix, ще компилира vue-app.js и ще го разгърне във файла public / js.

Сега сме готови. Нека направим внедряването:

npm тече производство

Ако разгръщането мина добре, трябва да можете да видите файл в папката public / js. Сега отворете приложението си и преминете към http: // localhost / vue. Localhost разбира се може да бъде различен, в зависимост от това как е конфигурирана вашата среда. Ако всичко мина добре, трябва да можете да видите, че VueJS е зареден. Когато използвате URL адреса за примерния компонент, компонентът пример трябва да се зареди. Хубавата част тук е, че страницата не е освежена! Така че, ако вашето намерение е да създадете приложение за една страница с различни компоненти, използвайки vue-router, всичко това може да работи заедно, докато останете в поддиректорията на vue. Използването на друг поддиректория може да опресни страницата и всички компоненти да бъдат заредени отново. Ако не искате това, уверете се, че файлът route.php е конфигуриран правилно.