Vue.js и SPA, как начать?

Пишу на Laravel, использую генерацию HTML на стороне сервера (blade шаблоны) + jQuery. Но недавно узнал про vue.js и про концепцию SPA (Single Page Application), захотел изучить. Но с ходу возник вопрос, который хотелось бы прояснить до изучения.

Если backend часть приложения играет роль исключительно API и не использует шаблоны, возвращая ответ в виде json, то как тогда в клиент отдаётся представление, содержащее в себе CSS стили, какой-то базовый шаблон страницы с тем же кодом на vue.js? Ведь хотя-бы одна отдача шаблона приложения в браузер клиента от сервера должна же быть.
  • Вопрос задан
  • 9015 просмотров
Решения вопроса 7
Кароч, используй vue-router, vuex, пиши компоненты через vue файлы, где можно запиндюлить стили конкретно для этого компонента, и все. Можно делать
Ответ написан
Stepan13
@Stepan13
Junior - Frontend
Любое SPA-приложение начинается с того, что на бэкенде делается соответствующая настройка. Если у вас полностью весь проект - это spa, то рендерится должен ВСЕГДА один и тот же шаблон, к примеру index.html, а далее управление отображением происходит на клиентской стороне.
Если приложение просто интегрировано в проект, то есть spa - это его часть, то опять же настраивается, чтобы к примеру на /app и /app/something рендерился всегда один и тот же шаблон, например app.html, в котором у вас собственно будет точка входа в приложение и будут подключены необходимые стили, скрипты и т.д.
Ответ написан
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Ну очевидно что-то должно отдать эту минимальную страничку с подключенными стилями и скриптами. Иногда достаточно nginx, чтобы отдать index.html c файловой системы, иногда за это отвечает то же приложение, что обслуживает API -- зависит от потребностей и архитектуры.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
На клиент при первом запросе передаётся веб-приложение полностью и кэшируется на стороне клиента в браузере.
Оно включает необходимую разметку HTML, стили CSS и скрипты JS.
После запуска - оно тянет инфу через API с бэкенда.
При повторном обращении - всё приложение берётся уже сразу из кэша браузера и поэтому данные тянутся только с API с бэкенда.
Лично я использую подгружаемую разметку и иногда какие-то необходимые скрипты, которые редко нужны на других страницах всего приложения.

Специально для этого - разрабатываю includeHTML.
На текущем этапе: реализую смену контента из секций единого HTML-документа и работу с подгрузкой JS-скриптов и CSS-файлов максимально просто.
Ответ написан
unclechu
@unclechu
Нужно чтобы либо твой бекенд отдавал "статику" (то-есть файлы твоего собранного фронтенда в виде SPA, вроде index.html, bundle.css, bundle.js), либо это можно поручить nginx-у. Как правило обычно за всем стоит nginx и он проксирует бекенд-роуты (/api к примеру) к серверу бекенда, а для прочих статично раздаёт файлы из директории с собранным SPA.

Тут нужно разве что сразу учесть, что как правило в SPA используется pushState для роутинга, то-есть само SPA эмулирует переходы по ссылкам вроде /foo/bar/baz, но таких файлов в директории со статикой, естественно, не будет, и если скопировать такую открытую ссылку и открыть в новой вкладке браузера - получим 404-ую, что нехорошо по ряду причин. Для решения этой проблемы нужно настроить nginx, чтобы все роуты он ссылал на один и тот же index.html (ну или сделать аналогичное на бекенде, если он отвечает за раздачу статики).

В любом случае статику раздавать лучше nginx-ом, он справляется с этим хорошо и не привлекает лишний раз для этого интерпретатор динамически-типизированного ЯП.
Ответ написан
@denisei
Наиболее ходовой вариант - webpack. Все ассеты и vue компоненты собираются в один файл (bundle.js). Клиенту отдается статика: index.html и этот самый bundle. А далее по сети гоняется только служебный траффик (не обязательно json).
Поставьте npm, затем vue-cli и создайте тестовый проект из командной строки, как это описано в доке. Там все работает, даже hot reload.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы