Дорожная карта Vue.js по изучению Vue.js и его экосистемы.

Vue.js, как и любой другой интерфейсный фреймворк, имеет некоторые сложности, когда вы хотите изучить и освоить этот фреймворк.

В этой статье мы разберем этот фреймворк на простые, легко усваиваемые темы, чтобы любой новичок или разработчик среднего уровня мог быстро отследить свое обучение и многое узнать о Vue.js.

Эта статья не предназначена для использования в качестве универсального инструмента для освоения Vue.js, а скорее является руководством по изучению наиболее популярных тем Vue.js и соответствующих экосистем.

Начало работы.

  1. Зачем использовать Vue.js.
  • Что такое Vue.js? ( введение )
  • Установка (NPM, CLI, Vite).
  • Преимущества использования Vue.js (преимущества / проблемы, которые решает Vue.js).

2. Базовая структура приложения Vue.js 3

  • Структура каталогов приложения Vue 3.
  • Шаблоны Vue.
  • API опций в Vue.js
  • Почему Composition-API.
  • Хуки жизненного цикла в Vue.
  • Параметры против Composition-API в Vue.js 3.
  • Вычисляемые свойства против методов.
  • Наблюдатели.

3. Директивы Vue, привязки (входные данные, состояния данных) и реактивность.

  • Директивы Vue.js.
  • Вычисляемые свойства .
  • Условная отрисовка .

4. Входные данные и обработка событий в Vue.js.

  • Двусторонняя привязка состояния / ввода с помощью директив v-модели.
  • Привязка значений с помощью v-bind .
  • Цикл по массивам с использованием директивы v-for.
  • События мыши и клавиатуры .
  • Модификаторы событий и ввода.
  • Модификаторы директивы событий.
  • Генерация событий в Vue.js.

5. Компоненты Vue.

  • Что такое компоненты Vue?
  • Зачем использовать компоненты ?.
  • Однофайловые компоненты.
  • Динамические и асинхронные компоненты.
  • Обработка крайних случаев.
  • Разбиение на составные компоненты.
  • Введение в Props.
  • Передача данных с помощью реквизита (от родительского к дочернему).
  • Модульные компоненты со слотами Vue.js.
  • Стилизация компонентов Vue.js.
  • Компоненты с ограничением по сравнению с глобальным CSS.
  • Условные.

6. Взаимодействие с сервером (API и базы данных)

  • Получение данных / информации из APIS.
  • Отправка данных на сервер.
  • Используя fetch / Axios.

7. Маршрутизация в Vue.js с помощью Vue Router.

  • Почему маршрутизация.
  • Настройка маршрутизации с помощью Vue router.
  • Именованные маршруты.
  • Дочерние и вложенные маршруты.
  • Настройка отсутствующих / не найденных страниц.
  • Вложенные маршруты.
  • Динамическая маршрутизация.
  • Маршрутная охрана.
  • Перенаправляет с Vue Router.

8. Управление состоянием с помощью VueX.

  • Что такое VueX ?.
  • Что такое «модель государственного управления» ?.
  • Почему государственное управление (что оно решает).
  • Когда я должен его использовать ?.
  • Установка.
  • Магазин Vuex.
  • Настройка библиотеки VueX в Vue.js
  • Начало работы (состояние, геттеры, мутации, действия, модули).

Дополнительно.

  • Структура приложения.
  • Плагины.
  • Строгий режим.
  • Обработка форм.
  • Тестирование.
  • Горячая перезагрузка.

9. Расширенные темы Vue.js.

  • Фильтры.
  • Миксины Vue.js.
  • Плагины Vue.js.
  • Пользовательские директивы.
  • Функции рендеринга и JSX.
  • Переходы (вход / выход)
  • Серверный рендеринг.
  • Узкие места в производительности.
  • Расширенные директивы (v-once и т. Д.).
  • Фреймворки Vue.js (Gridsome, NuxtJS, Vue Native, Vuepress).
  • Vue.js с фреймворками пользовательского интерфейса (Tailwind UI, Chakra UI, Bootstrap, Vuetify, Keen UI, Ant Design Vue, Fish UI, Buefy, PrimeVUE, Vuikit, Ionic Vue и т. Д.)

Vue Apollo и GraphQL.

  • Использование GraphQL
  • Мутации.
  • Vue Apollo.

TypeScript и Vue10.

  • Аннотирование реквизита.
  • Настройка tsconfig.json.
  • Пользовательские хуки в Vue.js.

Модульное тестирование

  • Введение в тестирование.
  • Утверждения.
  • Тестирование приложений в реальном мире.

Масштабирование производительности в Vue.js

  • Асинхронная загрузка компонентов
  • Асинхронные маршруты загрузки
  • Сжатие изображений или использование изображений WebP
  • Встряхивание дерева неиспользуемых стилей CSS (при использовании фреймворков CSS).

Как использовать Инструменты разработчика.

  • Фильтр проверенных данных.
  • Проверка DOM.
  • Компоненты фильтра.

Заключение.

Это было подробное руководство по освоению Vue.js от новичка до более продвинутых тем.

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

Другие материалы:



Как создать таймер с Nuxt.js и Tailwind CSS
Создайте таймер с Nuxt.js и Tailwind CSS. javascript.plainenglish.io





10 лучших советов и приемов JavaScript, которые вам нужно знать
Полезные советы и приемы, которые вы, возможно, не знаете, можно выполнять с помощью JavaScript. javascript.plainenglish.io



Больше контента на plainenglish.io