Введение

Привет, читатели! Это мой четвертый блог из серии «Дорожная карта». Здесь я перечислил все темы Vue, которые нужно изучать уровень за уровнем, чтобы освоить Vue.

Это не дорожная карта для React от начала до конца. Это часть моей первой полной дорожной карты разработки интерфейса (блог). Если вы не читали этот блог, значит, прочитайте его по ссылке ниже. При этом на уровне 2 нам нужно выбрать один Javascript Framework. Теперь мы выбрали Vue в качестве первого JS Framework. Итак, мы должны знать, чему нужно научиться, чтобы освоить Vue.

Ссылка :- https://medium.com/@venkateshb-03/front-end-roadmap-things-every-frontend-developer-should-know-for-surviving-up-to-2050-b0051f4df8c8 .

Давай учить….

Введение во Vue

Vue (как и представление) — это JavaScript-фреймворк для создания пользовательских интерфейсов и одностраничных приложений. Он построен на основе стандартных HTML, CSS и JavaScript и предоставляет декларативную модель программирования на основе компонентов, которая помогает вам эффективно разрабатывать пользовательские интерфейсы, будь то простые или сложные.

Вы можете использовать Vue для разработки следующих вещей

  • Улучшение статического HTML без шага сборки
  • Встраивание в виде веб-компонентов на любую страницу
  • Одностраничное приложение (SPA)
  • Полный стек / рендеринг на стороне сервера (SSR) - (Nuxt)
  • Jamstack / Генерация статических сайтов (SSG) - (VitPress, Nuxt)
  • Ориентация на настольные компьютеры, мобильные устройства, WebGL и даже на терминалы

Vue использует виртуальный DOM. Виртуальный DOM — это способ представления фактического DOM веб-страницы с объектами Javascript. Учитывая любой элемент HTML, мы можем создать виртуальный узел для его представления. Когда виртуальные узлы начинают изменяться, Vue сравнивает новое и старое состояние и решает, нужно ли обновлять DOM. Этот процесс называется примирением. Если требуется изменение, будут изменены только связанные узлы DOM, а остальная часть дерева останется нетронутой.

Дорожная карта

Я нашел изображение выше с https://roadmap.sh/frontend. Там мы можем увидеть все дорожные карты для FrontEnd, BackEnd, DevOps, Full Stack и т. д.

От базовых до продвинутых вещей, которые должен знать каждый разработчик vueJS:

Уровень 1 (веб-основы и VueBasics)

Изучайте HTML, CSS и Javascript (очень важно) со всем, что я упомянул в дорожной карте разработки переднего плана, вплоть до выбора Javascript Framework или библиотеки. (Link- https://medium .com/@venkateshb-03/front-end-roadmap-things-каждый-frontend-разработчик-должен-знать-для-выживания-до-2050-b0051f4df8c8).

Тогда учись

  1. VueCLI — Vue-CLI — это просто инструмент, который генерирует проекты Vue из шаблонов.
  2. JSX
  3. Виртуальный дом
  4. Компоненты - Компоненты одного файла
  • Регистрация компонента
  • Реквизит
  • События
  • Наследование атрибутов
  • Падение через атрибуты

5. Стили API-

  • API композиции
  • API опций

6. Шаблоны

  • Интерполяция текста Пример: - {{ var_name }}
  • Необработанный HTML (с использованием v-html directive or text interpolationl)
  • Привязка атрибута (Ex-- v-bind and Shorthand method like :id="var_name")
  • Директивы (Пример: - v-bind , v-for , v-if , v-on ,etc)
  • Модификаторы (пример: -v-on:submit.prevent="onSubmit"-Here .prevent modifier tells v-on directive to call event.prevntDefault() on triggered event.)

7. Две привязки данных

8. Привязка классов и стилей

Уровень 2 (Основы Vue 2)

  1. Конфигурации приложения
  2. Условный рендеринг (с использованием v-if,v-else,v-else-if and v-show and thier difference)
  3. Списки визуализации (с использованием v-for directive)
  4. Крючки жизненного цикла-
  5. Обработка форм
  6. Обработка событий
  7. Вычисленные свойства
  8. Ссылки на шаблоны

Уровень 3 (темы Vue Advance-1)

  1. API композиции в деталях — setup() или <script setup
  • реф и реактив и их отличие
  • toRefs
  • вычисленный
  • смотреть
  • следующийTick
  • Составные

2. API опций в деталях

2. API реактивности в деталях - например. ref() и reactive(), что позволяет нам напрямую создавать реактивное состояние, вычисляемое состояние и наблюдателей.

3. Асинхронные компоненты

3. Компоненты телепорта

4. Внедрение зависимостей — Provide() и Inject()

5. Пользовательские директивы

6. Пользовательские события

7. Плагины

8. Наблюдатели

9. Слоты

10. Остаться в живых

10. Анимации - Переход и группа переходов

Уровень 4 (Vue Advance 2 — Экосистема)

  1. Маршрутизация — Vue Router
  2. Формы
  • Vue формулировать
  • Ви Подтвердить
  • Подтвердить

3. Государственное управление

  • Вьюекс
  • Пиния

3. Стиль

  • Vuetify
  • Попутный ветер CSS
  • Пользовательский интерфейс элемента

4. Вызовы RestAPI

  • Аксиос
  • Unfetch
  • суперагент

5. Вызовы API GraphQL

  • Аполлон
  • Вью Реле

6. Рендеринг на стороне сервера (SSR)

  • Nuxt.js
  • Квазар

7. Генератор статических сайтов (SSG)

  • Nuxt.js
  • Вьюпресс
  • Смутный

8. Веб-компоненты с Vue.

Уровень 5 (Тестирование)

Тестирование библиотек для тестирования Vue

  1. Шутка
  2. Библиотека тестирования Vue
  3. СайПресс

Советы

Выполните некоторую операцию CRUD, например Todo APP с ref, а затем сделайте это с библиотекой управления состоянием, такой как Vuex и т. д. И выполните CRUD с интеграцией API (используя любой общедоступный API) с помощью HTTP-клиента, такого как Axios. А затем сделайте какое-нибудь приложение для клонирования, такое как клон Facebook, клон Amazon, и примените все концепции, которые вы узнали. И начните тестировать компонент с любой библиотекой тестирования.

Следите за обновлениями и будьте в курсе предстоящих версий и их функций. И посетите https://blog.vuejs.org/ эту официальную страницу блога vue, чтобы узнать о предстоящих функциях.

Заключение

Я надеюсь, что этот блог будет очень полезен для начинающих и новичков, которые работают или учатся в качестве разработчиков Vue.js, разработчика переднего плана или разработчика полного стека. Спасибо за прочтение. Хорошего дня ✌️.

Не волнуйтесь, это всего лишь дорожная карта, я буду вести блог по всем темам и концепциям, присутствующим на изображении выше.

Если вы считаете, что чего-то не хватает, у вас есть вопросы или вы хотите оставить отзыв, оставьте комментарий ниже. Буду признателен за отзыв.

Моя серия блогов о дорожной карте

  1. Полная дорожная карта разработки интерфейса — https://medium.com/@venkateshb-03/front-end-roadmap-things-every-frontend-developer-should-know-for-surviving-up-to-2050-b0051f4df8c8

Подпишитесь на мою страницу, и вы получите быстрое уведомление о новых блогах.

Пожалуйста, поделитесь своими отзывами и темами, которые вам нужно изучить в Command. На основе этого я буду улучшать свой блог.

Спасибо, что прочитали… Оставайтесь с нами До свидания…