This is an old revision of the document!
Table of Contents
Laravel + VueJS + Laravel Mix
Установка и настройка SPA
Для работы вам потребуется composer, php, nodejs, npm
В этой статье я не буду рассказывать как установить PHP, nodejs, npm
Установка Laravel
composer create-project laravel/laravel laravel-mix
Установка VueJS
npm i vue
Установка всех зависимостей
npm install
Установка bootstrap
npm install bootstrap
После установки, ваш файл package.json должен выглядеть примерно таким образом:
Настройка приложения
!!!В этом приложении маршрутизация будет не на стороне Laravel, в файле web.php напишем единую точку входа:
Route::get('/{any', 'SpaController@index')→where('any', '.*');
Все остальные пути будут через пакет Vue Router
Далее создаем контроллер:
php artisan make:controller SpaController
и пишем туда:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SpaController extends Controller
{
public function index()
{
return view('index');
}
}
След.шагом создаем сам файл index.blade.php в дерриктории resources/views/
наполняем его след.содержимым:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SPA Laravel</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
Весь javascript будем писать в resources/js/app.js
require('./bootstrap');
import Vue from 'vue'
const app = new Vue({
el: '#app',
})
Так же надо настроить webpack.mix.js, который должен лежать в корне проекта:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
Внимание! Чтобы использовать Laravel Mix с VueJS, необходимо дописать к подключаемым файла .vue()