Интеграция шаблона Bootstrap в VueJS - PullRequest
Новая
       7

Интеграция шаблона Bootstrap в VueJS

1 голос
/ 11 января 2020

Я разрабатывал VueJS веб-сайт в течение нескольких недель и понял, что мои дизайнерские навыки не были достаточно хороши, чтобы создать правильную целевую страницу. Я наткнулся на этот потрясающий Bootstrap шаблон с открытым исходным кодом и очень хотел бы его использовать.

Однако я хотел бы придерживаться VueJS, поскольку он мне нужен для некоторых других динамических c страниц. Как лучше всего интегрировать этот шаблон в VueJS компонент? Он также использует Bootstrap и немного JavaScript. Я знаю Vue Framework, такой как BootstrapVue, но для этого потребуется переписать всю страницу, используя ее пользовательские компоненты (такие как b-nav или b-nav-item).

Я пытался просто скопировать и вставить HTML в компонент, но у меня возникла проблема с CSS и JavaScript. Является ли использование файла bootstrap. css в Vue JS хорошей практикой?

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

1 Ответ

1 голос
/ 11 января 2020

Смысл BootstrapVue в том, чтобы отбросить зависимость Bootstrap от jQuery.
. Используется только Bootstrap ss css, а часть jQuery заменяется на Собственный BV JS (предоставляется через Vue компоненты).

На первый взгляд, это не похоже на ваш случай, так как вам нужен дополнительный код jQuery (собственный * для темы JS) - в настоящее время он написан на jQuery.

Однако, если присмотреться, собственный скрипт jQuery * довольно мал. Он в основном делает три вещи:

  • маршрутизирует URL страницы при переходе между разделами (которые могут / должны быть заменены Vue вызовами маршрутизатора в вашем случае),
  • реализует scrollSpy (который имеет альтернативу Vue) - он делает это для той же цели - зная, когда изменить URL страницы,
  • реализует magnificPopup (который также имеет альтернативу Vue).

Похоже, что зависимость jQuery может быть довольно легко отброшена, при условии, что она заменена кодом Vue.

Похоже, что вам нужен вариант Vue темы Bootstrap , Или, если быть более точным, вариант BootstrapVue.

Если бы мы искали наилучшего возможного кандидата на эту работу, он, вероятно, был бы найден где-то в пуле * 1068. * или BootstrapVue экспертов, а также создателей темы Bootstrap (скорее всего, они не должны находить BootstrapVue сложным в использовании - учитывая качество их шаблона).

Является ли эта работа подходящей для ваших способностей - это вопрос, на который вы можете ответить только, но если вы не заинтересованы исключительно в функциональной части (выполнение работы [1] ), это определенно хорошая возможность узнать больше о Vue и Bootstrap.
Чтобы получить полезную оценку, старшему разработчику FE потребуется от 8 до 20 часов для создания этого шаблона, при условии, что они знают Vue.

[1] Выполнение работы с наименьшими усилиями означало бы просто внедрить весь шаблон как страницу в существующее приложение Vue, делая Убедитесь, что вы импортируете все, что ему нужно (jQuery, jQuery .easing, Bootstrap, magnificPopup & scrollSpy) - ориентировочно приблизительно 4 часа - может быть меньше, но вы должны учитывать тестирование и возможные исправления ошибок.

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

Поскольку на вопросы SO требуется не более 15 минут, чтобы ответить, должно быть очевидно, что ни одна из описанных выше задач невозможна как вопрос переполнение стека . Кроме того, вы должны продемонстрировать некоторые свои собственные усилия по написанию кода и предоставить минимальный воспроизводимый пример .

...