post.jpg

Vue + Laravel. Основы работы.

Начиная с версии фреймворка Laravel 5.3, в него был встроен Vue. Это дает возможность легко "разбавить" backend frontend-ом, который все равно будет взаимодействовать с серверной частью проекта.

Для использования Vue в проекте на фреймворке Laravel, нужно иметь установленный Node.js и менеджеры пакетов NPM и, возможно, YARN (работает немного быстрее NPM). Прежде всего нужно войти в корневую директорию проекта и выполнить команды

$ npm install
$ yarn install

Для автоматической пересборки "на лету" клиентского java-скрипта ( /public/js/app.js ) и основного файла стилей приложения ( /public/css/app.css ) применяются команды

$ npm run watch 

или

$ npm run watch-poll

Исходники этих файлов находятся в директории /resources/assets/ ( начиная с версии Laravel 5.7 - в /resources/js/ и /resources/sass/ ) и перекомпилируются при каждом их изменении.

Например, изменяем файл /resources/js/app.js

и видим эти же изменения в файле /public/js/app.js

Работа Vue в Laravel прежде всего подразумевает под собой использование компонентов Vue .

Компоненты - это переиспользуемые экземпляры Vue со своим именем. Мы можем использовать компонент как пользовательский тег внутри корневого экземпляра Vue , созданного с помощью new Vue() :

             
<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

Компоненты представляют собой какую-то часть приложения, которая должна выглядеть и работать единообразно. Например: форма комментирования, файловый менеджер, красивый select и т.п. Компонентный подход позволяет избежать мешанины кода и позволяет четко выстраивать архитектуру приложения.

Компонент, который в DOM выглядит как обычный тег с пользовательским названием, на самом деле может включать в себя не только HTML-разметку, но и логику своей работы и использование других компонентов.

В Laravel используются однофайловые компоненты, которые находятся в директории /resources/assets/js/components/ ( или /resources/js/components/ для Laravel 5.7 ). Дефолтный компонент, который уже создан по умолчанию, находится в файле ExampleComponent.vue :


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Example component mounted.')
        }
    }
</script>

Каждый Vue-компонент может содержать максимум один блок template, а первый вложенный в него элемент ( напр. div) должен быть единственным родительским. Т.е. недопустима, например, такая запись:


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Another Example Component</div>
                    <div class="card-body">
                        I'm another example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Example component mounted.')
        }
    }
</script>

Секция script - язык по умолчанию - JS. Каждый .vue-файл может содержать максимум один блок script. Это обычный commonJS-модуль, что позволяет использовать require для подключения других зависимостей.

Секция style - язык по умолчанию - CSS . Таких секций может быть несколько в одном .vue-файле.

После создания компонента его необходимо зарегистрировать. Глобальная регистрация компонента осуществляеется в файле app.js в папке с исходниками resources. Компонент указывается после подключения фреймворка Vue.js, но до создания первого экземпляра Vue:


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
  	   // название компонента //       // путь к файлу с компонентом //
Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

Теперь, чтобы в любом шаблоне отрисовать содержимое компонента, нужно в нужном месте разместить в нем тег с именем компонента и закрыть его:


<div class="card mt-4">
    <div class="py-4 card-body">
        <h2>Example component</h2>
        <example-component></example-component>
    </div>
</div>

Результат:

Поделиться
Vue. Это дает возможность легко "разбавить" backend frontend-ом, который все равно будет взаимодействовать с серверной частью проекта.

" data-limit="3" data-counter>

КОММЕНТАРИИ (2)

PostEditor
Сделал все, как написано в статье, однако компонент не отображается. Что делать?
GiViK
Возможные причины: скомпилированный файл app.js не подключен к макету, или он никак не привязан к определенному HTML-элементу. Также в макете должен быть добавлен token . Очень хорошо об этом рассказано здесь