Ответы пользователя по тегу Vue.js
  • Как настроить разработку vue под java бэкенд?

    copist
    @copist
    Empower people to give
    По-умолчанию webpack отгружает приложение и всю статику с localhost:3000
    В настройках webpack надо указать другой базовый путь приложения.
    Пример https://github.com/pvolyntsev/toster-608800/blob/5...
    Ответ написан
    Комментировать
  • Как использовать два vue приложения на одной странице?

    copist
    @copist
    Empower people to give
    В модуле чата не используй роутер. Переключай представления (компоненты) без изменения URL.

    Что-то типа такого: в свойство component сохраняй код текущей видимой части приложения.
    <template>
       <app-dialog v-if="component === "dialog"></app-dialog>
       <app-settings v-if="component === "settings"></app-settings>
    </template>
    Ответ написан
    Комментировать
  • Как внедрить Vue в существующий Yii-проект?

    copist
    @copist
    Empower people to give
    Комментировать
  • Как внедрять vue в проект на Yii2?

    copist
    @copist
    Empower people to give
    Ты сборку на базе webpack используешь?

    В Yii2 надо будет сделать два layout: один для обычных страниц (view/layouts/main.php), второй для страниц с Vue (view/layouts/vue.php)

    Для режима dev в файле view/layouts/vue.php нужно подключать JS скрипты, которые генерит npm start. Для этого открой исходный код страницы, которую раздаёт webpack и скопируй оттуда все подключенные <script>. Либо вручную, либо парсер напиши. Вроде бы у этих скриптов статичные имена, поэтому тут проще. Можно один раз скопировать и забыть.

    Для режима prod нужно в лэйауте view/layouts/vue.php подключать финальные сжатые JS скрипты, которые генерит npm run build - тут сложность в том, что эти скрипты с уникальными именами всегда.

    Попробую сделать пример на github
    Ответ написан
    5 комментариев
  • Bootstrap-Vue - В чём фишка данного симбиоза?

    copist
    @copist
    Empower people to give
    Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

    Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

    Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

    Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

    Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

    И вот получается Bootstrap-Vue

    На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

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

    Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

    Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся
    Ответ написан
    4 комментария
  • Интернет-магазин на Falcon и VueJS?

    copist
    @copist
    Empower people to give
    Описанная тобой схема, при которой приложение разбито на две части: клиентское на JS и серверное, которые обмениваются данными через открытое API по HTTP - называется Rich Internet Application или Single Page Application. Реализуется на любом стеке. PHP/Python/NodeJS/Ruby/Go/C#/Java и др. с одной стороны и Vue/Angular/Meteor/React и др. (тыщи их) с другой стороны.

    (Упомянуя схема "микросервисная архитектура" по сути декомпозиция серверной части на незаввисимые модули с открытым API, совсем не обязательно реализовано через HTTP. Частный случай SPA/RIA.)

    Проблему назову одну. Только она не даёт покоя. Она выматывает душу, нервы и кошелёк.

    Интернет магазин должен быть открыт для индексации поисковым ботам, а HTML генерится в runtime на JavsScript. Только Google умеет выполнять JS, и то весьма посредственно. Остальные вообще JS не трогают. Есть два решения:
    для индексации сразу рисовать HTML на стороне сервера
    или снимать "отпечатки" HTML c приложения через виртуальный браузер, что сбоит

    Отрисовка HTML на стороне сервера (server side render) может быть реализована тремя способами:
    * подменять выдачу через серверный язык программирования, то есть вместо шаблонизации в Vue рисовать в Falcon - блин, две шаблонизации, две логики работы с данными (через AJAX и напрямую из базы)
    * имитировать исполнение JS на сервере (хм, это возможно опять же несколькими способами) - тут вообще танцы с бубном
    * отказаться от PHP/Python/Ruby и др. в пользу NodeJS и изоморфного фрейморка, например MeteorJS или VueJS (Nuxt)

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

    P.S. Про Google: проверено, глючит в тех местах, где клиентский JS начинает подкачку данных через HTTP - гугль обрывает рендеринг и в поисковом индексе лежат пустые HTML страницы. Толку от них никакого.
    P.P.S Снятие "отпечатков" HTML для SPA можно через специальные сервисы (prerender.io или brombone.com) или сделать самостоятельно, например через PhantomJS или Electron. В любом случае для проекта с десятком тысяч страниц это расходы на оплату сервиса, либо на мощный сервер. И электрон и фантом виснут, а HTML довольно большие и со временем забивают диск/базу. Опят же надо не забывать про то, что страницы требуют подгрузки данных через AJAX, надо чуть подождать.
    Пример: web-mastery-gauge.ru сделан на Angular, для поисковиков HTML отрисовывается через prerender.io - для проекта с 15 страницами это вообще никакой сложности не вызывает.
    P.P.P.S. SPA просто идеально для реализации той части пользовательского интерфейса, которая не индексируется поисковыми ботами. Например, то доступно только авторизованным пользователям. В этом случае не требуется server side render и 75% проблем отпадают. В том же интернет-магазине может быть админка - её можно сделать на VueJS.
    Ответ написан
    6 комментариев
  • Возможно ли выжать все соки из vue.js без webpack?

    copist
    @copist
    Empower people to give
    Есть вариант "рисовать" главные страницы через внешние сервисы
    https://toster.ru/answer?answer_id=668876#comments...
    https://toster.ru/answer?answer_id=916006#comments...
    Ответ написан
    Комментировать