Как на Vue.js настроить адаптивный интерфейс поиска

Как на Vue.js настроить адаптивный интерфейс поиска

От автора: вы задумались о том, чтобы прямо сейчас создать что-то удивительное с помощью одной из популярных современных платформ, но не знаете, с чего начать? Если да, то этот пост поможет вам. Сегодня рассмотрим, как реализуется с помощью Vue js поиск.

Что мы создаем?

Мы будем создавать адаптивный поиск на стороне клиента для 7 чудес света со следующими функциями:

Текстовый поиск и фильтры на основе рейтингов и лайков.

2 элемента в строке для планшетов и компьютеров, 1 элемент в строке для смартфонов.

Асинхронная выборка данных из внешнего API на стороне клиента.

Адаптивный дизайн, как показано ниже.

Как на Vue.js настроить адаптивный интерфейс поиска

Вид для компьютеров

Как на Vue.js настроить адаптивный интерфейс поиска

Вид для смартфонов

Демо-версия | Исходный код

Техническая архитектура

Мы будем работать со следующими технологиями:

Vue.js: Прогрессивный JavaScript-фреймворк

BootstrapVue: предоставляет одну из наиболее полных реализаций компонентов и системы сетки Bootstrap V4, доступных для Vue.js 2.5+, в комплекте с обширной и автоматической разметкой доступности WAI-ARIA.

Vue Cli 3: стандартные инструменты для разработки Vue.js

Структура проекта

Чтобы начать работу с проектом Vue, нам нужно настроить множество вещей, таких как Vue, Bootstrap, Vue Router, Vuex и т.д. Vue Cli предоставляет нам команду для создания проекта с большинством необходимых конфигураций.

Для остальных вещей, таких как BootstrapVue, vue-star-rating и т. д., мы можем использовать команду npm install. Проект по умолчанию, созданный с помощью vuecli, имеет следующую структуру:

Вышеуказанные вещи служат для объяснения архитектуры проекта и способа его инициализации. Мы можем начать с клонирования репозитория и написания следующих команд:

Некоторые важные компоненты:

components/Header.vue

Заголовок был создан в виде одного независимого компонента, чтобы его можно было повторно использовать на разных страницах, избегая дублирования кода.

components/Main.vue

Этот компонент содержит всю логику поиска / фильтров и отображения результатов, полученных из API. Этот компонент использует приведенный выше заголовок, импортируя его в скрипт.

Я надеюсь, теперь вы лучше понимаете, как начать работать с Vue и создать что-то потрясающее.

Автор: Honey Thakuria

Источник: //medium.freecodecamp.org

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: