egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Создаем новостное приложение с Vue.js и Nuxt
Create a News App with Vue.js and Nuxt
★5 (всего оценок - 13)
Продолжительность
0 ч 36 мин
Категория
NuxtКоличество уроков
14 Видео
Дата добавления
21 янв. 2018 г., 21:10
Язык
Английский
Дата выхода
6 сент. 2017 г., 00:00
Дата обновления
28 апр. 2026 г., 23:17
Хотите научиться создавать современное новостное приложение с удобной структурой, динамическими страницами и быстрым откликом? В этом курсе вы шаг за шагом освоите работу с Vue.js и Nuxt, получите практический опыт построения функционального проекта и разберетесь в ключевых принципах разработки контентных веб‑приложений.
Что вы изучите в этом курсе
Курс сфокусирован на практическом применении Vue.js и Nuxt. Вы будете работать с реальной структурой новостного сервиса, создавая полноценные страницы, элементы интерфейса и механизмы загрузки данных.
Основные навыки
- Создание динамических страниц категорий и отдельных материалов
- Загрузка и управление данными через API
- Фильтрация, сортировка и отображение контента
- Организация структуры проекта на Nuxt
- Создание пользовательских страниц и комментариев
- Стилизация элементов с использованием современных подходов
Структура курса
Материал курса разделен на логические части, каждая из которых помогает углубиться в разработку новостного приложения.
Подготовка проекта
- Установка и настройка окружения
- Создание базовой структуры Nuxt-проекта
- Обзор основных директорий и конфигураций
Работа с данными
- Подключение к API и получение новостного контента
- Использование Nuxt composables для управления состоянием
- Оптимизация запросов и кеширование
Создание страниц и интерфейсов
- Генерация страниц категорий
- Создание карточек новостей и списков материалов
- Реализация страницы статьи и комментариев
Итог проекта
В результате вы создадите полноценное многостраничное новостное приложение с удобной навигацией, разными категориями, комментариями пользователей и аккуратным современным интерфейсом.
Полезные материалы
Исходный код и дополнительные примеры доступны по ссылке:
- Урок 1.00:01:20Start a Nuxt Project with npx and the Vue.js CLI
- Урок 2.00:02:02Add a CSS Library from npm to Nuxt
- Урок 3.00:02:03Add JavaScript Libraries from npm to Nuxt
- Урок 4.00:03:22Create a Vuex Store for Global Data in Nuxt
- Урок 5.00:02:46Load Data into the Vuex Store in Nuxt
- Урок 6.00:04:13Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt
- Урок 7.00:01:39Build Global Navigation with Layouts and nuxt-link in Nuxt
- Урок 8.00:01:45Create CSS Transition Effects in Vue.js and Nuxt
- Урок 9.00:04:10Style a List and List Items in Vue.js and Nuxt
- Урок 10.00:01:51Register Vue.js Filters as Plugins in Nuxt
- Урок 11.00:02:03Style Navigation Based on Route in Nuxt
- Урок 12.00:02:03Display Only Available Data in Vue.js and Nuxt
- Урок 13.00:03:03Display a User Data Page Based on id in Vue.js and Nuxt
- Урок 14.00:03:55Build a Recursive Component for Nested Comments in Vue.js and Nuxt
Автор - egghead
Комментарии