Symfony. Связка с Vue приложением.

Получите доступ ко всему, что можно найти на этом сайте.

1 мес. 1 год
≈1000 руб. ≈3600 руб. (-80%)

Ссылки для оплаты доступны после регистрации и входа на сайт.


Symfony + Vue. Сборка Vue приложения в связке с Symfony проектом.


Создаем папку для хранения Vue проекта и разворачиваем проект с помощью vue cli


Изменяем путь компиляции Vue в доступную для Symfony директорию


Создаем роут для подключения приложения Vue


О javascript файлах, которые необходимо подключить


Пишем логику для подключения javascript файлов в зависимости от окружения


Подключаем файлы Vue фреймворка в зависимости от среды разработки


Как отключить разбитие на chunks build версии приложения


Создаем Symfony сервис для отслеживания состояния Vue приложения


Монтируем Vue приложение и ошибка с SSL сертификатом


Решаем проблему SSL сертификата при монтировании Vue приложения


Отображаем разные Vue компоненты на разных страницах Symfony


Что еще добавить в этот курс? Каких уроков вам не хватило?

Автор: Vasiliy Bulykin 12/01/2023 12:01:54

возник небольшой вопросик про подключение bootstrap.

подключив через «<link rel="stylesheet" href» и «<script src» бутстрап в base.html.twig — стили бутстрапа появились во vue, всё работает,... но!
понадобилось скриптом открыть modal
это делается через
...
.. const myModal = new bootstrap.Modal(document.getElementById('flashModal'), {});
.. myModal.show();
...
и вот я уже кучу часов бьюсь, как объяснить vue что такое "bootstrap", новый компонент которого я пытаюсь создать.
пока ничего не получается.
подскажите, плиз :)

убрал упоминания bootstrap из base.html.twig и выполнил импорт в main.js
...
.. import "bootstrap/dist/css/bootstrap.min.css"
.. import "bootstrap"
...

всё работает, но объект bootstrap создать не получается :(

Автор: Дмитрий Ченгаев 12/01/2023 01:01:15

Да, здесь нужно использовать библиотеку vue для bootstrap.
https://www.npmjs.com/package/bootstrap-vue-3

Но, для 3 версии vue библиотека очень сырая и постоянно доробатывается.

Очень многое не работает.

Рекомендую попробовать вместо bootstrap
https://antdv.com/components/overview

Автор: Vasiliy Bulykin 12/01/2023 02:01:30

концепция antdv мне нравится явно больше. но одну вещь я не понимаю :)
математика скрывается в:

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const visible = ref(false);.....

как пользоваться этим defineComponent?
если добавить в App.vue как есть — phpstorm говорит, что нехорошо иметь 2 export default
если поставить вместо export default просто function — то в теле появляется куча ошибок
если создать новый компонент — то как его импортировать в App.vue, если у него нет названия?.. сплошные вопросы :)

Автор: Дмитрий Ченгаев 12/01/2023 02:01:25

Попробуйте поизучать тему Options и Compositions API во Vue. Их можно преобразовать друг в друга.

У меня, к сожалению, пока таких видео нет на эту тему.

Автор: Vasiliy Bulykin 12/01/2023 02:01:04

а просто ответ "напиши вот это, и заработает" невозможен? :)

но, в любом случае, спасибо за наводку. пойду копать дальше. чего только не сделаешь ради того, чтобы сообщения выводились не обычным "alert", а красиво :D