SPA Laravel

====== 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 должен выглядеть примерно таким образом: {{:ebce88e301.jpg?600|}} ==== Настройка приложения ==== **!!!В этом приложении маршрутизация будет не на стороне Laravel, в файле web.php напишем единую точку входа:** ''Route::get('/{any}', 'SpaController@index')->where('any', '.*');'' Все остальные пути будут через пакет Vue Router Далее создаем контроллер: ''php artisan make:controller SpaController'' и пишем туда:






След.шагом создаем сам файл index.blade.php в дерриктории resources/views/

наполняем его след.содержимым:





    
    
    
    SPA Laravel
    


    
        
    








Весь 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













==== Запуск и проверка ====


''php artisan serve''


''npx mix''

http://joxi.ru/l2Zy3dEcR7GpOm


===== Ссылки  =====

Этот проект на Github [[https://github.com/Chifek/Laravel-VueJS-Laravel-Mix]]

Офф.сайт Laravel Mix [[https://laravel-mix.com]]

Qsoft Company