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>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Весь javascript будем писать в resources/js/app.js
require('./bootstrap');
import Vue from 'vue'
Vue.component('app', require('../components/App').default)
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').vue();
mix.css('resources/css/app.css', 'public/css').vue();
Внимание! Чтобы использовать Laravel Mix с VueJS, необходимо дописать к подключаемым файла .vue() (см.выше на код)
Следующим шагом будет создание файла resources/components/App.vue
<template>
<div class="container">
<h1>Qsoft Company</h1>
</div>
</template>
<script>
export default {
name: "app"
}
</script>
<style scoped>
</style>
Запуск и проверка
Ссылки
Этот проект на Github https://github.com/Chifek/Laravel-VueJS-Laravel-Mix
Офф.сайт Laravel Mix https://laravel-mix.com