Учить Vue - Курс Кода
Учить Vue - Курс Кода — Изучайте Vue.js, создавая компоненты на телефоне
Учить Vue - Курс Кода — бесплатное для начала приложение для iOS и Android, которое обучает Vue.js новичков, немного знакомых с HTML и JavaScript, а также разработчиков, переходящих с Options API на Composition API. В приложении 42 курса и 156 уроков: от первого шаблона до Pinia, Vue Router и Nuxt 3. Однофайловые компоненты компилируются на вашем устройстве, поэтому 20 учебных проектов, миссии и Vue Lab работают без сервера.
- Цена
- Бесплатно, переход на Pro
- Платформы
- iOS и Android
- Языки
- 22
- Возрастной рейтинг
- 4+
- Версия
- 82.6.0
- Требуется
- iOS 15.1 или новее
- App Store
- 3.0 ★ (2)
Компонент легче понять, если сначала сломать его.
Vue Lab каждый день предлагает вам сломанный компонент и просит найти ошибку, позволяет менять props компонента с помощью элементов управления в реальном времени и показывает, как изменяется состояние при нажатии. Однофайловые компоненты компилируются прямо на телефоне, поэтому предварительный просмотр ломается и исправляется у вас на глазах, а карточка ошибки объясняет, что пошло не так.
Что это
Учить Vue - Курс Кода — бесплатное приложение для iOS и Android, которое обучает Vue.js в 42 курсах и 156 уроках: от синтаксиса шаблонов и привязки данных через Composition API, Pinia, Vue Router и TypeScript до Nuxt 3, тестирования с Vitest и full-stack приложений. Однофайловые компоненты компилируются на устройстве, поэтому учебные проекты, миссии по программированию и практический Vue Lab работают на телефоне без сервера, а ИИ-наставник в Pro объясняет код и ошибки.
В приложении
Как это выглядит
Курс
Что входит в курс по Vue
42 курса и 156 уроков из собственного списка курсов приложения — от первого шаблона до серверного рендеринга и продакшен-паттернов.
Начало работы с Vue.js
Введение в Vue.js, Vue CLI и структуру проекта, синтаксис шаблонов и привязку данных.
Реактивность и Composition API
Основы Composition API во Vue 3, синтаксис script setup, реактивность и вычисляемые свойства, а также директивы Vue.
Компоненты и формы
Основы компонентов и взаимодействие между ними, слоты, provide и inject, формы и валидация, а также жизненный цикл компонента.
Повторное использование и улучшение
Composables во Vue 3, переходы и анимации, обработка ошибок, а также функции рендеринга и JSX.
Состояние и маршрутизация
Управление состоянием с Pinia, Vuex, маршрутизация с Vue Router и продвинутые паттерны маршрутизации, а также работа с API и асинхронными данными.
TypeScript, i18n и инструменты
TypeScript с Vue 3, интернационализация, интеграция со Storybook, а также развёртывание и сопровождение приложений Vue.
Nuxt 3, тестирование и приложения реального времени
Серверный рендеринг с Nuxt 3, тестирование компонентов с Vitest, GraphQL с Apollo и приложения реального времени с WebSockets.
Продакшен-паттерны
Производительность, лучшие практики безопасности, разработка плагинов, публикация библиотеки компонентов, прогрессивные веб-приложения и микрофронтенды.
Как это работает
Как проходит обучение Vue в приложении
Каждый курс имеет уровень, а каждый урок после первого бесплатного курса начинается с бесплатного предварительного просмотра. Так вы можете понять, как выглядит тема, прежде чем решить изучать её дальше.
Начните с курса «Введение в Vue.js»
Первый курс бесплатный: он начинается с объяснения, что такое Vue, настройки среды и создания приложения Hello Vue. Курсы отмечены уровнями от A1 до C1, поэтому легко понять, с чего начать и что изучать дальше.
Создавайте и запускайте компоненты на телефоне
Редактируйте однофайловый компонент и сразу просматривайте результат. В учебных проектах приложение развивается шаг за шагом, а App Studio позволяет создавать многоэкранные приложения с маршрутизатором и хранилищем на основе готовых шаблонов.
Практикуйтесь в Vue Lab
Ищите ежедневную ошибку, воссоздавайте целевой дизайн в Style Lab, соревнуйтесь со временем в дуэлях на скорость сборки или переписывайте компонент с Options API в стиле Composition API.
Что внутри
Что входит в приложение
42
Курса, 156 уроков
От синтаксиса шаблонов и директив через жизненный цикл, слоты, provide и inject и composables до Nuxt 3, GraphQL, PWA и микрофронтендов.
20
Учебных проектов
Развивайте приложение шаг за шагом: однофайловые компоненты компилируются прямо на вашем устройстве, а при сбое предварительного просмотра появляется карточка ошибки.
28
Миссий по программированию
Упражнения от простых до сложных, а также шаблоны App Studio для многоэкранных приложений с маршрутизатором и хранилищем.
Лаборатория
Vue Lab
Инспектор реактивности, ежедневный поиск ошибок, 12 уровней Style Lab, дуэли на скорость сборки, dojo по переходу с Options API на Composition API и библиотека My Components, которой можно делиться в виде карточки-изображения.
Собеседование
Вопросы по Vue для собеседований
Вопросы для собеседований на должность front-end разработчика, тесты, повторение с помощью карточек и шпаргалка, которую можно открыть в любой момент.
ИИ
ИИ-наставник (Pro)
Задавайте вопросы о концепции или ошибке, просите объяснить код или создавайте персональный урок на любую интересующую вас тему.
Контекст
Что такое Vue.js и что новичку изучить в первую очередь?
Vue — это фреймворк JavaScript для создания интерактивных веб-интерфейсов из компонентов: небольших повторно используемых элементов, каждый из которых отвечает за часть шаблона, логики и стилей. Новичкам легко начать благодаря плавному входу: можно использовать обычный HTML и немного JavaScript, постепенно добавляя структуру. Разумный порядок изучения — шаблоны и привязка данных, затем реактивность и компоненты, потом Composition API и лишь после этого маршрутизация, управление состоянием и серверный рендеринг.
Реактивностьидея, лежащая в основе
Вы изменяете данные, и зависящий от них экран обновляется сам. Понимание того, какие значения являются реактивными, а также того, что добавляют вычисляемые свойства и наблюдатели, устраняет большую часть первых сложностей во Vue.
Options API и Composition APIдва способа написать компонент
Более старый Options API группирует код по типам, например data и methods. Composition API с script setup группирует его по функциям и упрощает создание повторно используемых composables. Многие учебные материалы и кодовые базы по-прежнему используют оба подхода, поэтому полезно уметь читать каждый из них.
Pinia, Vuex и маршрутизаторчто добавляет настоящее приложение
Когда в приложении появляется несколько экранов, нужна маршрутизация для перехода между ними и общее хранилище для данных, которые используются несколькими компонентами. Pinia — актуальное хранилище для Vue, а Vuex — прежний вариант, который по-прежнему используется во многих существующих проектах.
Nuxt и серверный рендерингкогда важны поиск и скорость
Nuxt развивает возможности Vue и рендерит страницы на сервере, что ускоряет первую загрузку и повышает видимость в поиске. Обычно эту тему изучают на втором этапе — после того, как компоненты, маршрутизация и состояние уже стали понятными.
Подходит
Кому это подходит — а кому нет
Подойдёт, если вы
- Знаете немного HTML и JavaScript и хотите изучить первый фреймворк
- Переходите с Options API на Composition API или с Vuex на Pinia
- Готовитесь к собеседованию на должность Vue.js-разработчика или к первой работе во фронтенде
- Лучше учитесь, исправляя сломанный компонент, чем читая о нём
- Хотите заниматься короткими сессиями по пути на работу
Это не тот инструмент, если вы
- Никогда не работали с HTML или JavaScript — сначала пройдите курс по JavaScript
- Хотите выпустить продакшен-приложение с телефона — для этого ноутбук всё ещё подходит лучше
- Ожидаете, что всё будет бесплатным: первый курс и предварительные версии уроков бесплатны, а Pro открывает всю учебную программу
- Хотите материалы от официальной команды Vue.js — это независимое обучающее приложение
Вопросы
Часто задаваемые вопросы
Как лучше всего изучать Vue.js на телефоне?
Учитесь, запуская компоненты, а не только читая о них. Учить Vue - Курс Кода компилирует одnofайловые компоненты на устройстве, поэтому все 20 учебных проектов, 28 миссий и Vue Lab работают прямо на телефоне. Короткие уроки в 42 курсах проведут вас от синтаксиса шаблонов до Nuxt 3, а начать можно с бесплатного первого курса.
Учит ли приложение Composition API и Pinia?
Да. В Учить Vue - Курс Кода есть курсы по основам Composition API во Vue 3, синтаксису script setup, composables и управлению состоянием с Pinia, а также по более старому Vuex для существующих проектов. В Vue Lab есть dojo «От Options API к Composition API», где можно переписывать классические компоненты в современном стиле.
В чём разница между Options API и Composition API во Vue?
Options API группирует код компонента по типу — например, data, methods и computed, — а Composition API с script setup группирует его по функциональности и упрощает повторное использование composables. Учить Vue - Курс Кода обучает Composition API с script setup и включает в Vue Lab dojo «От Options API к Composition API» для переписывания классических компонентов в современном стиле.
Нужно ли знать JavaScript до изучения Vue?
Знание основ HTML и JavaScript очень помогает. Учить Vue - Курс Кода предназначен для начинающих, которые знают основы и хотят изучить свой первый фреймворк: приложение объясняет концепции Vue с самого начала, но не обучает самому JavaScript. Если переменные и функции для вас в новинку, сначала стоит пройти курс по JavaScript.
Что такое Vue Lab?
Vue Lab — это практический раздел Учить Vue - Курс Кода. В нём есть инспектор реактивности, ежедневная охота на баги со сломанным компонентом, уровни Style Lab, где нужно воспроизвести целевой дизайн с помощью CSS, дуэли на скорость, dojo «От Options API к Composition API» и библиотека My Components со всем, что вы создали.
Есть ли в приложении Nuxt 3 и серверный рендеринг?
Да. Продвинутые курсы Учить Vue - Курс Кода охватывают серверный рендеринг с Nuxt 3, потоковую SSR-обработку с Suspense и полнофункциональную разработку на Vue с Fastify и аутентификацией, а также тестирование компонентов с Vitest и приложения реального времени с WebSockets.
Помогает ли приложение подготовиться к собеседованиям по Vue.js?
Да. В Учить Vue - Курс Кода есть вопросы по Vue для собеседований на должность front-end разработчика, а также тесты, сессии повторения по флеш-карточкам и шпаргалка. Лежащие в их основе курсы охватывают реактивность, жизненный цикл, composables и управление состоянием — распространённые темы на собеседованиях.
Бесплатен ли Учить Vue - Курс Кода?
Приложение можно скачать бесплатно. Бесплатны первый курс, предварительный просмотр каждого урока, первый учебный проект, первая миссия, ежедневная охота на баги, три уровня Style Lab, тесты, вопросы для собеседований и шпаргалка; в бесплатной версии показывается реклама. Pro открывает всю учебную программу и Vue Lab, наставника с AI и сертификационный экзамен, а также убирает рекламу.
Приложение создано командой Vue.js?
Нет. Учить Vue - Курс Кода — независимое обучающее приложение, не связанное с проектом Vue.js и не одобренное его создателями. В нём Vue.js преподаётся как фреймворк с открытым исходным кодом в рамках собственных курсов и упражнений.
Есть ли сертификат?
Да. После сдачи итогового экзамена, который входит в Pro, вы получите сертификат о завершении обучения. Он подтверждает выполненную вами работу, но не является аккредитованной квалификацией, поэтому лучше всего дополняет компоненты и проекты, которые вы можете объяснить.
Какие платформы и языки он поддерживает?
Учить Vue - Курс Кода работает на iPhone через App Store (iOS 15.1 или новее) и на Android через Google Play. Интерфейс доступен на 22 языках, а рейтинг приложения в App Store — 4+.
Начать
Создайте свой первый компонент Vue уже сегодня
Начните бесплатно на iOS и Android на одном из 22 языков.
Другие приложения CoddyKit
Доступно на iOS и Android.