Как сделать правильную(гибкую, качественную) архитектуру Vue в Laravel?

Question

[vism]

Добрый день.
Начал разбираться в связке Vue и Ларавель. Архитектура предложенная в примере хороша только для примера. Реально если так использовать будет каша в файлах и коде, как мне кажется.
Для фронта так-же хочу использовать бутстрап и его плагины и jQuery

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

Может хорошие статьи или уроки у вас сохранены, по этому вопросу?
На ларакасте смотрел, уровень не тот.
Как верно писать компонент Vue, прямо так как в примере от Ларавель? Или есть более правильный подход?

Все компоненты и плагины яваскриптов собирать в один файл или разные как-то?

Answer 1

[hopeful_romantic]

Правильно писать так, как в примере от Laravel (файл Example.vue).

Хотя, можно обойтись и без Example.vue, а писать бизнес логику в app.js.
Например, вот этот товарищ так и делает:
https://www.youtube.com/watch?v=ZEF3TAAzfVM

Но, первый вариант, более правильный.
Когда начнешь так писать, возникнет необходимость в обмене данными между разными vues.
Для этого используй Vuex.
Можешь посмотреть о нем вот здесь:
https://www.youtube.com/playlist?list=PL55RiY5tL51...

А в остальном, в правильном направлении движешься.
Приложения с использованием связки Laravel+Vue.js получаются реально классными.

Желаю удачи!

Comments

[vism]

спасибо!

[vism]

по первой ссылке убого сделано приложение если честно

А вот второе видео это круто
Может есть еще какие-то подсказки, советы, где могу наступить на грабли?
этот vuex сэкономит кучу времени мне я чувствую.

[hopeful_romantic]

Я думаю, что для старта, у тебя уже достаточно информации.
На самом деле, там не все так сложно, как может казаться на первый взгляд.
Удачи!

Answer 2

[Юрий]

в blade шаблонах по-моему не удобно писать vue шаблоны. как минимум начинают переменные интерпретироваться, и надо как то экранировать. поэтому страницы делаю во vue файлах.

сейчас blade шаблоны выглядят так.

@extends('layouts.app')

@section('content')
    <page-cities></page-cities>
@endsection

пока так, но думаю все таки на SPA со временем переходить, и при такой системе это сделать будет не сложно. пока практикую такой переходный вариант, а дальше посмотрим.
также послушал бы и про другие подходы.

Comments

[vism]

Не верно я выразился видимо.
Я хочу писать страницы в блэйде как есть, но допустим, когда появляется компонент, типо форма логина, левый сайдбар, и прочее, выносить в компонент.
В итоге в блэйде статика в основном остается

А компоненты вы делаете как советует ларавель?
например так? https://github.com/ratiw/vuetable-2-with-laravel-5...

Все скрипты миксите в один файл?

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

[Юрий]

vism: конечно в один файл, а как еще? 100 файлов подключать. шаблоны страниц почти ничего не весят на фоне веса доп библиотек.

[vism]

Юрий: дык, доп библиотеки в один файл или отдельно?

И еще vue шаблоны как я смотрю, сначала идет темплейт а ниже явакскрипт и css к нему.
Это правильный подход?

[Юрий]

vism: я делю отдельно vendor и свои скрипты.

мой конфиг. в дальнейшем при развитии проекта вендор будет обновляться реже (у юзеров он даже после деплоя я думаю будет кешироваться, тк версия не изменится).

mix
    .js('resources/assets/js/app.js', 'public/js')
    .extract([
        'vue',
        'jquery',
        'bootstrap-sass',
        'axios',
        'lodash',
        'vue-select',
        'leaflet'
    ])
    .sass('resources/assets/sass/app.scss', 'public/css');

[Юрий]

vism: css можно, но я его в основном отдельно выношу, но у меня типовая админка и цсс там совсем немного.
скрипты и шаблоны в одном файле вроде бы на любителя, но лично мне пока нравится, обычно они и так компактные, и то что в одном месте это плюс.
ну и конечно же никто не мешает вам разнести их отдельно, просто не так удобно будет подключать, надо будет импортить два файла как минимум.

[vism]

Юрий: а когда vue компоненты пишите, разметку, яваскрипт и css к нему в нем осталяете или нет?
Вобще по идее в нем оставлять можно, это же компонент, он как модуль должен быть независем.

[Юрий]

vism: как и написал в vue пока скрипты и шаблоны. но на счет цсс нет прдубеждения. в том то и дело что удобно когда компонент цельный, подключил один файл и все есть, отключил и ничего лишнего не грузится.

Answer 3

[dskozin]

Здравствуйте!

Сейчас пишу приложение в связке Vue и Laravel. Изначально стал использовать подход с компонентами в отдельных файлах - это действительно правильный путь. Иначе как только приложение немного разрастется управлять им будет невозможно.
Так же использую vue-router и vuex. Концепции не очень сложные - со временем они точно пригодятся.
По умолчанию Лара предлагает писать так же компонентами, которые собираются в приложение встроенным механизмом - Elixir. Я пошел немного по другому пути - установил webpack с vue шаблоном компиляции и стал разрабатывать фронт как принципиально отдельное приложение (как здесь), обращающееся к Ларе за данными (REST архитектура). После компиляции файл фронта подключу к точке входа Лары (index.blade.php и в нем id="app") и сделаю проброс веб маршрута (не АПИ) в приложение (как здесь).

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

Comments

[vism]

Спасибо)
А я наоборот пошел по пути инлайн темплейтов собирающихся блэйдом.
По сути вью выступает как яваскрипт библиотека, позволяющая более хорошо разделить логику фронта.
Пошел по пути который предложил laravel-spark.
Удобно тем, что можно на основе переменных с сервера строить исходные шаблоны(страницы) а дальше просто накидывать на них вью яваскрипт. Не нужно отдельными запросами получать всякие списки, переменные через апи.
Хотя я не очень во фронте, может оно как-то иначе делается)