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

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

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

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

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

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

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

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

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Как на 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 предоставляет нам команду для создания проекта с большинством необходимых конфигураций.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

components/Header.vue

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

components/Main.vue

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

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

Автор: Honey Thakuria

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

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

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

Комментарии Facebook:

Добавить комментарий