Изучение Vue.js в 2023 году: дорожная карта разработчика

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

Дорожная карта для изучения Vue.js в 2023:

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

1. Сборка
2. Стилизация
3. Управление состоянием
4. Проверка типов
5. API
6. Маршрутизация
7. Библиотеки утилит
8. Тестирование
9. i18n
10. Десктоп
11. Серверный рендеринг
12. Заключение

Сборка

Менеджеры пакетов npm и Yarn облегчат вам жизнь, самостоятельно вычисляя комплекс операций для каждого пакета и запуская установщик пакетов с нужными параметрами. Также освойте работу инструментом сборки Vite и таск-раннерами по типу npm-scripts.

Что касается Vite, то это альтернатива Vue CLI. Вместо Webpack он использует однофайловые компоненты без шага сборки бандлов. Подробнее об этом инструменте вы узнаете из видео:

Стилизация

Это базис, необходимый любому фронтендеру. Углубляйте знания, изучая препроцессоры Sass/SCSS и PostCSS, фреймворк Tailwind и однофайловые компоненты.

Управление состоянием

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

Проверка типов

Предположим, приложение растёт, и риск получить баги, связанные с проверкой типов, — тоже. В некоторых случаях следует использовать TypeScript для корректной проверки типов во всём приложении, а в некоторых — PropTypes. Как это работает? Можно перечислить входные параметры с помощью объекта, в котором свойство и значение содержат информацию о типе конкретного параметра и его имени. Например:

			props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // или любой другой конструктор
}
		

Узнайте больше о валидации входных параметров.

API

Что же касается работы с API, здесь всё стандартно:

• GraphQL
• Apollo
• Relay
• REST
• Fetch
• Axios
• SuperAgent

Маршрутизация

Vue Router — это официальная библиотека маршрутизации фреймворка. К её преимуществам относится модульная конфигурация маршрутизатора, удобный контроль навигации, настраиваемая прокрутка страниц, анимация переходов представлений и многое другое. Суть в том, что Vue Router добавляет текущий маршрут в каждый компонент — достаточно лишь указать this.$route внутри необходимого компонента.

Библиотеки утилит

Библиотека утилит OpenGL (GLU) — это графическая библиотека, которая является надстройкой над OpenGL. На самом деле, здесь намного больше вариантов для изучения, чем представлено в дорожной карте по изучению Vue.js. Среди них:

• Lodash
• Day.js
• Ramda
• Numeral
• RxJS

Тестирование

Разработчики Vue также являются создателями Vue Test Utils — официальной библиотеки для модульного тестирования: советуем ознакомиться.

И хотя тестирование end-to-end не связано напрямую с Vue.js, оно также необходимо для обеспечения бесперебойной работы приложения. К популярным инструментам для E2E тестирования относятся Cypress, Selenium, Puppeteer и Cucumber.js.

i18n

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

Десктоп

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

Серверный рендеринг

Для разработки высокопроизводительных приложений на Vue потребуется разделение кода, маршрутизация на базе компонентов, серверный рендеринг и многое другое. Эти и дополнительные возможности вроде Progressive Web Applications (PWA) предоставляются прямо из коробки с минималистичным фреймворком Nuxt.js.

Заключение

Так как же начать изучение Vue.js в 2023 году? В дорожную карту включены не только технологии, которые касаются непосредственно Vue. Вы должны уметь работать с инструментами сборки вроде менеджеров пакетов и Vite, владеть CSS на уровне архитектуры и препроцессоров, управлять состоянием, выполнять проверку типов, работать с инструментами API, маршрутизации, тестирования и библиотеками утилит. Не стоит забывать и о локализации приложения, серверном рендеринге, а также фреймворках для десктопной разработки.

Вас также могут заинтересовать другие гайды:

• Дорожная карта по фронтенду
• Дорожная карта по React