Использовать компоненты Vue в Laravel 5.3 прямо из коробки стало проще, чем когда-либо, потому что в 5.3 по умолчанию более продуманный стек для фронтенда, чем в предыдущих версиях. Не переживайте, разобраться в компонентах по умолчанию не сложно.
Давайте вместе посмотрим на стек JavaScript в Laravel 5.3. Запустите пример приложения с помощью установщика Laravel (а если вы похожи на меня, используйте ((https://github.com/tightenco/lambo Lambo))), и откройте сайт в своей любимой IDE.
{{CUT}}
== Файл %%(t)package.json%% по умолчанию ==
Сначала посмотрим на наш %%(t)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 (который, кстати, ((https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.4tunzl1uk скоро уйдёт в отставку)) и будет заменён, я надеюсь), и у нас по-прежнему есть jQuery и Sass, и Lodash.
== Файл Gulp по умолчанию ==
Теперь давайте посмотрим на наш файл Gulp (Elixir):
%%(js)
const 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.
.(alert)
Тэйлор и Джефри недавно анонсировали новую версию Elixir, которая будет полностью основана на Webpack, а не на Gulp, и будет называться ((https://twitter.com/stauffermatt/status/811374319746093057 Mix))!
== Файл %%(t)app.js%% по умолчанию ==
Итак, что дальше? Давайте посмотрим что делает %%(t)app.js%% (который находится в %%(t)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 поставляется с готовым файлом %%(t)bootstrap.js%%, мы проверим это через минуту. Затем мы подключаем пример компонента Vue, на который тоже посмотрим. И он привязывает наш компонент к элементу на нашей странице с помощью ID %%(t)app%%.
Даже не заглядывая вперёд, можно предположить, что если мы скомпилируем этот файл и добавим его на нашу страницу, то что-то такое будет //что-то// делать:
%%(html)
%%
== Файл %%(t)bootstrap.js%% по умолчанию ==
Давайте выясним, что он будет делать на самом деле. Сначала откроем файл %%(t)bootstrap%%, который расположен по пути %%(t)resources/assets/js/bootstrap.js%%
%%(js)
window._ = 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'
// });
%%
== Образец компонента ==
Давайте посмотрим на этот образец компонента в %%(t)resources/assets/js/components/Example.vue%%:
%%(html)
Образец компонента
Это образец компонента!
%%
Это компонент Vue в ((https://blog.tighten.co/setting-up-your-first-vuejs-site-using-laravel-elixir-and-vueify Vueify))-стиле, который мы можем использовать в качестве примера для создания своих компонентов. Вы узнаете, что он работает, если увидите на экране содержимое "образца компонента".
== Запуск Yarn и Gulp ==
Итак, куда же нам пойти дальше? Давайте установим наши зависимости и запустим Elixir, а затем проверим страницу. Мы используем Yarn (а если у вас его нет, вместо этого просто выполните %%(sh)npm install%%):
%%(sh)
yarn
gulp
gulp watch
%%
== Изменения в шаблонах Blade ==
Сколько работы надо сделать, чтобы посмотреть, работает ли это всё? Давайте посмотрим, как выглядят шаблоны Blade в Laravel 5.3. Файл по умолчанию %%(t)welcome.blade.php%% вообще не ссылается на эти файлы, в отличие от "((ВП:Скаффолдинг скаффолдинга))" (заготовочных файлов) авторизации, поэтому выполните %%(sh)php artisan make:auth%% для их публикации.
Теперь мы можем посмотреть на наш файл по умолчанию %%(t)resources/views/layouts.app.blade.php%%:
%%(html)
... (содержимое заголовка)
.. (много контента)