Может войдёшь?
Черновики Написать статью Профиль

Используем Vue в Laravel 5.3 с начальной загрузкой и образцом компонента

перевод новое в 5.3

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

Давайте вместе посмотрим на стек JavaScript в Laravel 5.3. Запустите пример приложения с помощью установщика Laravel (а если вы похожи на меня, используйте Lambo), и откройте сайт в своей любимой IDE.

Файл package.json по умолчанию

Сначала посмотрим на наш package.json:

js{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}

Теперь мы используем Vue 2 и Vue Resource (который, кстати, скоро уйдёт в отставку и будет заменён, я надеюсь), и у нас по-прежнему есть jQuery и Sass, и Lodash.

Файл Gulp по умолчанию

Теперь давайте посмотрим на наш файл Gulp (Elixir):

jsconst elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Управление ресурсами Elixir
 |--------------------------------------------------------------------------
 |
 | Elixir предоставляет чистый и гибкий API для определение базовых задач Gulp
 | для вашего приложения Laravel. По умолчанию мы компилируем Sass-файл
 | для вашего приложения, а также публикуем ресурсы вендора.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

Здесь нет ничего нового, кроме того, что мы подключаем Vue вверху, а для минификации наших скриптов используем Webpack вместо Browserify.

Тэйлор и Джефри недавно анонсировали новую версию Elixir, которая будет полностью основана на Webpack, а не на Gulp, и будет называться Mix!

Файл app.js по умолчанию

Итак, что дальше? Давайте посмотрим что делает app.js (который находится в resources/assets/js).

js/**
 * Сначала мы загрузим все JavaScript-зависимости этого проекта,
 * включая Vue и Vue Resource. Это отличная отправная точка для
 * создания надёжных, мощных веб-приложений с помощью Vue и Laravel.
 */

require('./bootstrap');

/**
 * Затем мы создадим новый экземпляр Vue-приложения и прикрепим его
 * к странице. Затем вы можете начать добавлять компоненты в это приложение
 * или настроить заготовки JavaScript под ваши конкретные нужды.
 */

Vue.component('example', require('./components/Example.vue'));

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

Похоже, Laravel поставляется с готовым файлом bootstrap.js, мы проверим это через минуту. Затем мы подключаем пример компонента Vue, на который тоже посмотрим. И он привязывает наш компонент к элементу на нашей странице с помощью ID app.

Даже не заглядывая вперёд, можно предположить, что если мы скомпилируем этот файл и добавим его на нашу страницу, то что-то такое будет что-то делать:

xml<html>
<head></head>
<body>
    <div id="app">
        <example></example>
    </div>
    <script src="/js/app.js"></script>
</body>
</html>

Файл bootstrap.js по умолчанию

Давайте выясним, что он будет делать на самом деле. Сначала откроем файл bootstrap, который расположен по пути resources/assets/js/bootstrap.js

jswindow._ = require('lodash');

/**
 * Мы загрузим jQuery и плагин Bootstrap jQuery, который обеспечивает поддержку
 * для функций Bootstrap на базе JavaScript, таких как модальные элементы и вкладки.
 * Этот код можно изменить в соответствии с конкретными нуждами вашего приложения.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue - современная JavaScript-библиотека для создания интерактивных веб-интерфейсов
 * с помощью "реактивной" привязки данных и повторно используемых компонентов. У Vue простой
 * API, позволяющий вам сконцентрироваться на создании вашего нового великолепного проекта.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * Мы зарегистрируем HTTP-перехватчик, для прикрепления CSRF-заголовка к каждому
 * исходящему запросу нашего приложения. Встроенный в Laravel посредник CSRF
 * автоматически проверит значение заголовка.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

/**
 * Echo обеспечивает выразительный API для подписки на каналы и прослушивания
 * событий, рассылаемых Laravel. Echo и вещание событий позволяет
 * вашей команде легко создавать надёжные веб-приложения реального времени.
 */

// импортировать Echo из "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Образец компонента

Давайте посмотрим на этот образец компонента в resources/assets/js/components/Example.vue:

xml<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Образец компонента</div>

                    <div class="panel-body">
                        Это образец компонента!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Компонент подключен.')
        }
    }
</script>

Это компонент Vue в Vueify-стиле, который мы можем использовать в качестве примера для создания своих компонентов. Вы узнаете, что он работает, если увидите на экране содержимое «образца компонента».

Запуск Yarn и Gulp

Итак, куда же нам пойти дальше? Давайте установим наши зависимости и запустим Elixir, а затем проверим страницу. Мы используем Yarn (а если у вас его нет, вместо этого просто выполните shnpm install):

shyarn
gulp
gulp watch

Изменения в шаблонах Blade

Сколько работы надо сделать, чтобы посмотреть, работает ли это всё? Давайте посмотрим, как выглядят шаблоны Blade в Laravel 5.3. Файл по умолчанию welcome.blade.php вообще не ссылается на эти файлы, в отличие от «скаффолдинга» (заготовочных файлов) авторизации, поэтому выполните shphp artisan make:auth для их публикации.

Теперь мы можем посмотреть на наш файл по умолчанию resources/views/layouts.app.blade.php:

xml<html>
    ... (содержимое заголовка)
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
</head>
<body>
    <div id="app">
        .. (много контента)
    </div>

    <!-- Скрипты -->
    <script src="/js/app.js"></script>
</body>
</html>

Здесь надо озвучить несколько замечаний. Во-первых, заготовочные файлы авторизации используют /js/app.js, поэтому все они будут иметь доступ к нашему экземпляру Vue и всем подключенным зависимостям. Во-вторых, вы видите базовый div c ID app — это значит, что мы можем использовать наши компоненты Vue где угодно в любом из наших шаблонов, и они будут зарегистрированы. И, наконец, есть родительский JavaScript-объект window.Laravel, в котором вы можете задать любую полезную информацию; здесь вы можете получить CSRF-токен в любом JavaScript, просто сославшись на Laravel.csrfToken.

Итак. Мы запустили Elixir, просмотрели все наши JavaScript файлы, а также взглянули на шаблоны Blade, которые будут ссылаться на эти файлы. Давайте посмотрим, как это работает!

В браузере

Поскольку вы используете Valet и, скорее всего, запускаете это с помощью Lambo (верно?), то теперь вы можете в браузере перейти по этим маршрутам напрямую. Я запустил этот проект с помощью shlambo blogpost, поэтому теперь я могу зайти на http://blogpost.dev/login, чтобы посмотреть, как выглядит заготовка авторизации.

Я думаю, всё выглядит хорошо, поэтому теперь можно проверить, что наши компоненты Vue действительно работают правильно. Откройте resources/views/auth/login.blade.php и добавьте <example></example> куда-нибудь в раздел PHPcontent.

/packages/proger/habravel/uploads/714-5-3-vue-components-using-example.png

Сохраните файл и обновите страницу.

/packages/proger/habravel/uploads/714-5-3-showing-example-component.png

Вот и всё! Теперь у вас есть полностью рабочий стёк Vue с Bootstrap и jQuery и работающий образец компонента Vue в Vueify-стиле. «Вжух»! Всё сделано практически без усилий.

Как вы считаете, полезен ли этот материал? Да Нет

Написать комментарий

Разметка: ? ?

Авторизуйся, чтобы прокомментировать.