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

Курсы программирования в Бишкеке

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

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

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

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

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

Сборка

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

Что касается Webpack, многие считают его сложным. Это так, однако без него ряд Vue-функций, таких как однофайловые компоненты, будут недоступны. Для лучшего понимания предлагаем прочитать нашу статью по изучению Webpack с нуля.

Стилизация

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

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

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

https://youtube.com/watch?v=c2SK1IlmYL8%3Ffeature%3Doembed

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

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

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

API

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

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

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

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

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

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

Разработчики Vue также являются создателями Vue Test Utils — официальной библиотеки для модульного тестирования: советуем ознакомиться.Конференция «Суровый код из Омска»18 сентября в 10:00, Онлайн, Беcплатноtproger.ruСобытия и курсы на tproger.ru

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

i18n

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

Десктоп

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

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

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

Заключение

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

https://cc.net.kg/frontend.php

 

Комментариев нет

Добавить комментарий