laravel vue что это

Зачем использовать Vue вместе с Laravel?

Разобрался (на уровне beginer) с Laravel 5.3, теперь хочется понять и Vue.js и зачем его туда добавили.

Суть вопроса: какое практическое применение может быть у этого js фреймворка в качестве фронтэнда для проекта на L5.3? Ну, кроме того, что показывали Вей и Оутвелл на Ларакастс 😉 Может есть какие-то реально существующие кейсы (пощупать, посмотреть, поучиться)?

Например, где-то читал про то, что используя Vue, можно вообще обойтись без Blade (всё делать «реактивным», через компоненты *.vue).

Короче говоря, буду рад вашим комментам/ссылкам.

Добавили, чтобы вы jquery спагетти не использовали. Vue (как и другие js фреймворки) сокращает количество кода на клиенте и уменьшает его запутанность.

Для примера вы создаете админку для магазина. У вас есть следующие варианты:
1. Делать статическую страницу. На клиенте никакой логики, все вычисляет сервер. При новой покупке администратор должен будет обновить страницу.
2. Писать динамический фронтэнд с использованием vue, angular и чего угодно остального. Бэкэнд шлет вам уведомления через вэбсокеты о новых заказах без перезагрузки страницы.
2.1 Вы берете jquery и сначала все идет хорошо. Первые полчаса. Затем ваш код обрастает огромным количеством обработчиков событий. Если товар заканчивается на складе, его надо убрать из таблицы, затем если заказ отменяется, его надо вернуть в таблицу. Вы его вернули, но почему-то кнопка в строке с ним, вызывающая модальное окно перестала реагировать на события, потом еще что-то случилось и еще. Проблемы с jquery растут как снежный ком и вы проклинаете свое решение создать динамическую админку.
2.2 Вы используете современный js фреймворк. Vue в этом плане хорош низким порогом изучения. Вы загружаете определенные обхекты и в зависимости от их свойств vue сам строит таблицы (с проданными и непроданными товарами), скрывает лишние элементы (не показывать такую-то кнопку, если товар всего 1), отправляет плагинам команды на обновление при изменении объектов и следит за тем, чтобы события, которые отваливались при jquery подходе работали.

Я не сказать что спец в javascript, но (именно поэтому) меня vuejs на текущем проекте очень выручает.

Vue:
+ табличные данные генерировать легче и быстрее
— проще делать аяксы, динамику, фильтры, и тп.

Мы в проекте перешли на Vue для новых страниц (т.е. не переписываем старые страницы, а новые пишем на вуе сразу же). На подключение, изучение, обучение и тп ушло 2-3 дня всего, но сразу же было заметно что вуе удобнее.

Источник

Настройка вашего первого сайта на Vue.js с помощью Laravel Elixir и Vueify

Складывается ощущение, что каждый день появляется новый JavaScript фреймворк. Мы в Tighten не успели поработать с каждым из них, но опробовали достаточно большое количество, и наряду с такими, в которых нам чего-либо не хватает, мы нашли один, поистине превосходный — Vue.js. На самом деле он не новый, но недавно он начал набирать обороты, и он отлично подошёл для многих наших проектов.

Знакомьтесь, Vue.js

Так что же такое Vue.js?

Это JavaScript фреймворк, такой как React, Ember или Angular.

У него двухсторонняя привязка данных, как в Ember и Angular.

Он лёгкий и может быть использован для простого украшения компонента, как Knockout.

Он может быть помещён на страницу с нулевой сложностью сборки, но также легко его части можно собрать воедино для поддержки импорта ES2015.

У него быстрая привязка данных, позволяющая использовать вычисляемые свойства, и она бесплатна для любых объектов данных, передаваемых в него, как в React.

Он предоставляет инструменты для разделения вашего кода на компоненты, которые можно компоновать как автономные файлы, как в React.

У него есть маршрутизатор, поэтому вы можете использовать его для одностраничных приложений, но он также хорошо подходит для одноразовых компонентов и прототипирования.

Структуры данных его ядра простые и работают с объектами POJO (Plain Old JavaScript Objects); структура вашего приложения может быть сколь угодно простой или сложной.

Вы можете узнать больше о Vue из статьи автора фреймворка: Vue.js: знакомимся (снова). Также посмотрите бесплатную серию ларакастов по Vue.

Применение Vue в обычных проектах

Рассмотрим, как работать с Vue в простейшем случае (без Elixir и Vueify): fiddle.

В этом примере мы делаем две вещи: первая — импортируем Vue из CDN, вторая — создаём div ( PHP #example ), который будем использовать как наш контейнер Vue, и пишем в него немного шаблонного кода. И третье — мы создаём корневой экземпляр Vue и привязываем его к этому контейнеру.

В результате Vue передаёт объект data в шаблон, определённый в представлении, и рендерит его.

Дальше можно делать много всего, но мы сделаем большой скачок — добавим систему сборки и систему компонентов Vueify. Эти инструменты не обязательны для разработки на Vue, но когда ваше приложение и компоненты достигнут определённого уровня сложности, вы откроете для себя огромные возможности этих инструментов.

Теперь мы переключимся на синтаксис компонент-в-одном-файле Vue в стиле JSX при помощи Vueify. А также будем использовать систему сборки Gulp из Laravel Elixir, чтобы подключить наши зависимости, собрать наши скрипты, и получить доступ к синтаксису ES2015 при помощи Babel.

Знакомьтесь, Vueify

Перед погружением в Elixir, давайте посмотрим на Vueify. Вот простой файл Vueify, который мы назовём Hero.vue :

Это определение нашего компонента. Нам надо поместить его в наш основной JavaScript файл app.js вот так:

И будем использовать его в HTML вот так:

Так мы разместили экземпляр нашего компонента Hero на нашей странице.

Что такое Laravel Elixir?

Перейдём к нашей системе сборки.

Один из основных недостатков React — сложность инструментов для сборки, которые вам нужно изучить для работы с ним. Ранее мы рассмотрели Webpack ( Распаковка Webpack ), но нельзя сказать, что он особенно прост в изучении.

Вы можете использовать Vue без каких либо сложных инструментов, но для больших приложений часто нужны более сложные системы, которым часто нужны более сложные инструменты.

Gulp и импорт ES2015 — первые шаги к упрощению нашей жизни. Импорт ES2015 стандартизирует процесс импортирования модулей между нашими компонентами. А Gulp — лучший инструмент для сборки, с которым я когда либо работал (да, я читал эти статьи о том, как сборочные скрипты NPM изменили мир, и я пробовал использовать их, и я бы предпочёл навсегда стереть из своей головы воспоминания об этом кошмаре).

Laravel Elixir — инструмент для сборки для PHP-фреймворка Laravel, но он также прекрасно работает и вне Laravel. Это обёртка вокруг Gulp, которая позволяет просто и безболезненно выполнять все задачи по разработке, которые характерны для подавляющего большинства веб-приложений.

Рассмотрим такой Gulp-файл:

А вот тот же файл при использовании Elixir:

Самое важное — мы получаем Babel (для ES2015) бесплатно, а Vueify недорого, поэтому можем писать простые, раздельные компоненты и не иметь проблем, когда дело доходит до их соединения воедино.

Итак, давайте сделаем это.

Использование Laravel Elixir и Vueify

Для начала давайте возьмём Elixir в наш новый проект.

Импортирование пакетов

Откройте ваш package.json и заполните его чем-то таким:

Теперь сохраним его и установим наши пакеты:

Это займёт какое-то время, поэтому давайте начнём писать наш Gulp-файл. Создайте файл с именем gulpfile.js и вставьте в него это:

Давайте запустим его в первый раз (при этом для вас будет создана целевая папка):

Вставка в HTML-страницу

Давайте скорее создадим компонент Vue и вставим его в нашу страницу. Сначала создадим public/index.html :

И включим его в наш resources/assets/js/app.js :

Теперь вы можете открыть index.html в браузере, и там вы. ничего не увидите. Скоро мы это изменим.

Создание своего первого компонента

Давайте создадим компонент для нашей страницы. Начнём с профиля пользователя.

Теперь поместим этот компонент в app.js :

И наконец, используем компонент в index.html :

Сохраняем, даём запуститься нашему gulp, и неожиданно наш компонент появляется на странице:

Сейчас мы не станем рассматривать все возможности Vue, но в будущем вы найдёте больше статей об использовании Vue здесь и на моей личной странице. А пока посмотрим, что у нас уже есть: с помощью нескольких строчек кода мы имеем систему сборки, полностью поддерживающую ES2015, с Vueify, и она работает прямо на нашей странице.

Перед тем как закончить, рассмотрим использование PHP import в компоненте.

Включение компонентов в другие компоненты

Создадим небольшой компонент для изображения профиля. Добавим новый файл в resources/assets/js/Picture.vue :

Теперь импортируем его в Profile.vue :

Та-дам! Наше изображение теперь показано на профиле.

Наслаждайтесь! Развивайтесь с vueify.

Комментарии (6)

Очень хорошая статья, спасибо!
Подскажите, а если я хочу динамически вставить компонент picture в template компонента profile, например, по нажатию кнопки, vue позволяет это сделать?

Нашел ответ на свой вопрос тут:
http://initcode.info/how_to_add_dynamic_componentspartials_in_vue_js

В последних версиях Laravel появилась поддержка Webpack. Можно ли пример подключения Vue для связки Laravel+Elixir+Webpack?

Снимаю шляпу! Настроил по этому примеру сборку Vue на Slim

Статистика: Символов — 9 868/8 248 без пробелов (6 745/5 691 без кода):, слов — 1 055

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запуск Yarn и Gulp

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

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

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

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

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

В браузере

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

Комментарии (1)

У меня на laravel 5.6 вместо кириллицы кракозябры хотя кодировка utf8 стоит

Статистика: Символов — 7 159/6 008 без пробелов (3 646/3 068 без кода):, слов — 579

Источник

Создаем SPA с помощью Vue и Laravel Часть 1

В этой статье вы узнаете как настроить Vue Router и Laravel для SPA веб-сайта. Сегодня мы сосредоточимся на написании всего необходимого кода, а следующей статье мы покажем как все это использовать.

Как работают Vue SPA с Laravel в качестве backend:

Vue router может работать в двух режимах:

Мы будем использовать History mode, поэтому нам необходимо настроить Laravel чтобы он возвращал SPA шаблон на любой запрос. Например, если пользователь запрашивает /hello, Laravel должен будет вернуть в ответ html шаблон нашего SPA, а дальше Vue Router самостоятельно определит как обрабатывать данный URL.

Установка

Для начала нам нужно создать новый проект Laravel, и установить Vue Router npm библиотеку:

$ laravel new vue-router
$ cd vue-router

# Link the project if you use Valet
$ valet link

# Install NPM dependencies and add vue-router
$ yarn install
# or npm install vue-router
$ yarn add vue-router

Теперь у нас есть новый Laravel проект и Vue-router библиотека. Далее мы настроим vue-router и добавим несколько маршрутов и компонентов.

Настройка Vue Router

Vue Router занимается тем, что сопостовляет запрошенный URL конкретному Vue компоненту, а затем выводит его в шаблоне в теге router-view :

Сперва нам требуется отредактировать наш главный JS файл resources/assets/js/app.js и настроить Vue Router. Замените содержимое файла app.js следующим кодом:

import Vue from ‘vue’
import VueRouter from ‘vue-router’

import App from ‘./views/App’
import Hello from ‘./views/Hello’
import Home from ‘./views/Home’

const router = new VueRouter( <
mode: ‘history’,
routes: [
<
path: ‘/’,
name: ‘home’,
component: Home
>,
<
path: ‘/hello’,
name: ‘hello’,
component: Hello,
>,
],
>);

const app = new Vue( <
el: ‘#app’,
components: < App >,
router,
>);

Теперь нам требуется создать несколько дополнительных файлов, но сначала давайте разберемся что мы написали в файле app.js :

В настройках VueRotuer мы указали массив routers, который определяет маршруты для нашего приложения. Для каждого маршрута мы можем задать: имя (точно так же как мы задаем имя для наших маршрутов в Laravel), путь (URI который он должен обрабатывать) и компонент который должен обрабатывать данный маршрут.

Чтобы laravel.mix отработал без ошибок, нам нужно создать компоненты которые мы определили выше:

$ mkdir resources/assets/js/views
$ touch resources/assets/js/views/App.vue
$ touch resources/assets/js/views/Home.vue
$ touch resources/assets/js/views/Hello.vue

Источник

Основа для большого модульного SPA на Laravel + Vue + ElementUI с CRUD генератором

Последние годы удалось поработать над несколькими большими и не очень проектами с использованием разных back-end и front-end фреймворков. Сталкивался с разными проблемами, возникавшими по мере роста приложения.

Сейчас могу сделать вывод из того, какие решения были удачными, а какие — не очень.
Используя накопленный опыт, задался целью собрать все лучшие решения, на мой взгляд, и создать свою основу для SPA.

Как создавать сайт на Laravel или что такое SPA, я рассказывать не буду. Такой информации хватает в интернете. Эта статья рассчитана на более-менее опытных разработчиков, поэтому некоторые детали я упущу.

Кому не терпится, в конце статьи ссылка на мой репозиторий на гитхабе.

Основными технологиями были выбраны Laravel и Vue.js + Vuex так как это мой основной стек.

Для быстрой разработки взял UI Kit — ElementUI.

Главная цель

Создать основание для среднего и большого проекта которое:

Дальше каждый слой следует разделить сначала по функциональности, а потом уже каждый функциональный модуль — соответственно выбранному паттерну.

Вдохновляясь философией DDD, решил и фронт-енд и бэк-енд разделить на смысловые модули. Но это не те классические домены, что описывает Эванс. Его модель тоже не идеальна. В любом приложении со временем всегда появляются связи между компонентами — те же отношения между моделями.

Модели оставил отдельным слоем, потому, что они как бы дублируют базу данных, со всеми ее связями.

На фронте создал каталог resources/js/modules, в котором и будут находиться разные модули. В каждом будет api — методы для работы с бэк-ендом, components — все компоненты и страницы, store — хранилище, и routes.

В resources/js создана папка core, где помещены основные компоненты системы.
Также есть папки bootstrap и includes для настройки дополнительных библиотек и утилит соответственно.

В проекте используется динамическая погрузка моделей. А именно в core/routes и в core/states мы подгружаем соответствующие файлы роутов и хранилищ автоматом (ничего прописывать не надо).

Вот пример как были подгружены store.js с разных модулей автоматически.

На бэк-енде в каталоге app будут аналогичные модули. Каждый модуль будет содержать папки Controllers, Requests, Resources. Файл с роутами тоже вынесен сюда — routes_api.php.

Другие шаблоны проектирования типа events, jobs, polices и т.п. не будут включены в модули, так как они используются реже и логичнее их держать отдельным слоем.

Все манипуляции с динамической загрузкой модулей сделаны для того, чтобы между ними било минимальное зацепление. Это позволяет без последствий добавлять и удалять модули. Теперь можно сделать artisan make команду для создания такого модуля. С ее помощью мы сможем быстро наполнить проект нужными сущностями вместе с CRUD функциональностью.

Выполнив команду php artisan make:module , у нас появятся все нужные файлы включая модель и миграции для работы полноценного CRUD. Вам останется только выполнить миграции php artisan migrate и все будет работать. Скорее всего вам понадобиться добавить дополнительные поля, поэтому перед миграцией не забудьте добавить их в модель, миграцию, а также, вывести во vue.

В данном шаблоне для аутентификации использовалась технология JWT-Auth, но возможно она избыточная и стоит переделать на Laravel Sanctum. В свою очередь На фронт-енде используется vue-auth, она позволяет легко управлять авторизацией пользователей и ролями.

В дальнейшем хотелось бы улучшить систему. Добавить глобальную шину событий, подключить websockets. Добавить тесты. Возможно в отдельных ветках сделать вариант с управлением ролями или создать ветки с другими UI Kit. Было бы хорошо, услышать рекомендации, замечания.

Изначально данный шаблон разрабатывался для своих нужд, но теперь надеюсь он станет полезным и для других пользователей.

Источник