Использование темы CSS/JS/jQuery с Vue.js
В настоящее время я пишу небольшой статический сайт и решил использовать Vue.js, так как использовал его в прошлом без особых проблем. На этот раз я должен использовать готовый шаблон, основанный на jQuery/Bootstrap, и большая часть тяжелой работы выполняется с помощью JS.
Я пытаюсь использовать Шаблон Порту. Я смог преобразовать основы (CSS, добавить маршрутизатор и т. д.), но я борюсь со стороной JS. Из того, что я смог понять, различные «компоненты», исходящие из шаблона, активируются после загрузки всей страницы. Сценарий инициализации проходит через HTML DOM и «активирует» их.
Обычно это работает нормально, особенно при использовании старого подхода в стиле jQuery, но из-за жизненного цикла Vue для компонентов JS не выполняется повторно, как только на странице появляется новый компонент, поэтому он выглядит так, как будто он не работает.
Наиболее логичным подходом было бы взять каждый компонент Porto и разделить его на компоненты Vue, с собственным JS и т. д. Но это означает, что любое обновление шаблона потребует полной перезаписи, не забывая при этом о количестве работы по созданию первая версия.
В настоящее время я попытался обернуть импорт <script> в компонент и вставить его на страницу. Моя идея состояла в том, чтобы затем использовать метод this.$forceUpdate() для принудительного повторного рендеринга, но это не удается.
Любые другие идеи?
Я согласен с тем, что вы говорите, но, как я уже сказал в вопросе: «Наиболее логичным подходом было бы взять каждый компонент Porto и разделить его на компоненты Vue, с их собственным JS и т. д. Но это означает, что любой обновление шаблона потребовало бы полной перезаписи, не забывая при этом о том объеме работы, который был проделан для создания первой версии». Я пытаюсь найти способ избежать этого
Миксины не помогут? vuejs.org/v2/guide/mixins.html
Да, миксины определенно помогли... кажется, это работает, хотя мне пришлось скопировать и вставить содержимое файла в миксин. Есть ли способ импортировать файл и выполнить его? Я знаю, что импорт ES6 оценивается только один раз, и мне нужно переопределить это поведение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Если ваша тема требует, чтобы методы jQuery вызывались для инициализации вещей, вам нужно будет исследовать вызов этих методов в опции
mountedVue. Ссылка vuejs.org/v2/api/#mounted