Инструменты и приемы для ускорения разработки на Vue.js

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

Мы подробно рассмотрим методы, которые нужно взять на вооружение, упомянем ошибки, которых следует избегать, а также перечислим инструменты, которые ускоряют и упрощают разработку на основе Vue.js. В основном мы сосредоточимся на Vue 2, поскольку эту версию все еще использует большинство разработчиков. Пользователям Vue 3 беспокоиться не стоит – почти все методы применимы и к этой версии, поскольку она представляет собой расширенный и более быстрый вариант Vue 2. Если вы уже хорошо знакомы с Vue 2 и хотели бы узнать, что нового появилось в Vue 3, посмотрите эту инструкцию по переходу на новую версию.

Примечание: данная статья предназначена как для новичков, так и для опытных веб-разработчиков, которые хотят усовершенствовать свои навыки использования Vue.js. Для лучшего понимания материала пригодятся базовые знания JavaScript и Vue.js.

Структура проекта: модульная или файловая

Давайте начнем со структуры проекта и рассмотрим, как структурировать файлы и модули, и почему файловая структура хуже подходит для масштабируемых проектов, по сравнению с модульной.

Во время создания нового проекта с помощью сборщика Vue.js CLI мы получаем файловую структуру, установленную разработчиками фреймворка по умолчанию. Использование файловой структуры для небольшого проекта – неплохая идея, но если приложение будет масштабироваться, проекту потребуется другая структура. В противном случае код станет запутанным, а поиск файлов – затрудненным.

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

+-- src/
|   +-- assets/
|       +-- logo.png
|       +-- userprofile.png
|   +-- components
|       +-- NotificationBar.vue
|       +-- LoginForm.vue
|       +-- DashboardInfo.vue
|       +-- AuthenticationModal.vue
|   +-- main.js

Для упрощения навигации и поиска информации все компоненты следует рассортировать в соответствии с логикой приложения и бизнеса: нужно завести отдельные модули для аутентификации, продукта, сервиса и так далее. Код станет опрятнее, а навигация – проще:

+-- modules/
|   +-- AuthModule/
|       +-- assets/
|           +-- userprofile.png
|       +-- Components/
|           +-- Authentication.vue
|           +-- login.vue
|   +-- NotificationModule
|       +-- assets/
|            +-- Alert.png
|       +-- Components/
|            +-- NotificationBar.vue
|   +-- ProductModule/

Организация модулей

Для организованного хранения модули следует разделить на два основных типа:

• системные модули Vue.js;
• модули приложения.

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

Разделение на модули в соответствии с функциональностью приложения – лучший способ структурирования проекта. Это особенно важно, когда над реализацией различных функций работают отдельные команды разработчиков. Еще одно преимущество модульной структуры заключается в том, что она упрощает обслуживание и поддержку, а в перспективе – доработку и обновления приложения.

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

К примеру, если ваша команда работает над модулем «Выплаты», будет удобно расположить все соответствующие функции и данные в папке payout («выплаты»).

+-- modules/
|   +-- payout/
|       +-- index.js
|       +-- assets/
|       +-- Components/
|            +-- PayOut.vue
|            +-- UserInfo.vue
|       +-- store/
|            +-- index.js 
|            +-- actions.js
|            +-- mutations.js          
|       +-- Test/

Файл index.js при этом будет содержать код для импорта и использования только тех плагинов, которые непосредственно связаны с выплатами. В папке assets («ресурсы») будут располагаться ресурсы – изображения и стили – используемые в дизайне модуля «Выплаты». Директория Components содержит компоненты, задействованные в функциях расчета выплат, а в папке store хранятся все действия, геттеры и мутации, используемые в соответствующих состояниях. Для хранения тестовых данных и запросов предназначена папка test.

Использование пользовательских директив

Директивы в Vue.js – это методы для выполнения определенных действий. Названия директив начинаются с префикса «v-»: v-if, v-model, v-for. Когда в приложении, созданном на основе Vue.js, мы используем, например, v-model для связи данных с формой ввода, мы передаем фреймворку команду, определенную и встроенную в Vue.js.

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

Регистрация пользовательских директив и хуков

Объявить кастомные директивы можно двумя способами:

1. Глобально – в нашем файле js.
2. Локально – в нашем компоненте.

Хуки в директивах срабатывают, как методы – при наступлении определенного события. Фреймворк Vue.js предоставляет нам хуки жизненного цикла – created и mounted, а также хуки для использования в наших собственных директивах.

Предположим, мы работаем над веб-приложением и хотим, чтобы фоновой цвет одной из страниц менялся при каждой загрузке. Такого эффекта можно добиться, используя кастомную директиву. Мы назовем эту директиву colorChange. Наш шаблон может выглядеть примерно так:

<template>
  <div id="app" v-color-change>
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>

Чтобы пользовательская директива могла работать, мы добавим в файл main.js следующий код:

// custom directive
Vue.directive("color-change", {
  bind: function (el) {
    const random = Math.floor(Math.random() * 900000) + 100000;
    el.style.backgroundColor = `#${random}`
  }
})

Директива Vue.js принимает название кастомной директивы в качестве первого аргумента, затем принимает Object в качестве второго аргумента, который определяет поведение пользовательской директивы. В качестве хука выступает bind – он связывает директиву с элементом. Элемент принимает следующие аргументы:

• el – это узел элемента, с которым мы связываем директиву;
• binding – задает поведение директивы;
• vnode – это виртуальный узел Vue.js.

Так одной директивой мы задали 6-разрядный диапазон генерации hex-кода фонового цвета для страницы.

Рекомендации по созданию пользовательских директив

Выше вы создали свою первую директиву и теперь готовы к рекомендациям. За исключением el, никогда не изменяйте аргументы хуков. Всегда следите за тем, чтобы права доступа оставались в режиме «только чтение», поскольку аргументы хуков – это объекты с нативными методами, которые могут вызвать неполадки в случае изменения. При необходимости для распределения информации между хуками используйте наборы данных Vue.js.

При использовании CLI-сборки Vue.js, кастомные директивы должны быть объявлены в файле main.js, чтобы все .vue файлы имели к ним доступ. Давайте своим директивам «говорящие» названия, чтобы сразу было понятно, какие именно функции они выполняют. Для демонстрации возможностей директив была создана эту страницу. Дополнительные сведения о пользовательских директивах можно найти в официальной документации.

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

Система реагирования в Vue.js очень мощная – она обнаруживает элементы, нуждающиеся в обновлении, и обновляет их самостоятельно. Вам, как разработчику, не придется ничего делать для этого. К примеру, страница будет автоматически перезагружаться при каждом открытии. Однако, иногда, нам может потребоваться написать код, который будет форсировать обновление.

Примечание: написание кода для обновлений по требованию необходимо достаточно редко, но программирование такого события дает лучшее понимание системы реагирования Vue и динамического обновления данных.

Принудительное обновление

В большинстве случаев, при изменении данных в Vue-объектах страницы обновляются автоматически. Иногда обновление не производится автоматически, например, при использовании директивы v-for в коде, перебирающем значения элементов массива без передачи параметра :key.

<div v-for="item in itemsArray" :key="item">

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

var app = new Vue({
  data: {
    items: ['1', '2']
  }
})
app.items[1] = '7' //vue does not notice any change

Есть несколько способов запустить обновление или рендеринг. Худший метод – использование v-if для обновления страницы, если значение какого-то события true (истинно), и скрытие компонента, если значение равно false (ложно). Этот метод плох, потому что шаблон не удаляется из памяти, а просто скрывается из вида до следующего обращения.

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
      };
    },
    methods: {
      rerender() {
        this.show= false;
        this.$nextTick(() => {
            this.show = true;
        });
      }
    }
  };
</script>

В приведенном выше коде, состояние show («показывать») изначально установлено на true, и благодаря этому компонент отображается на странице. После нажатия кнопки вызывается функция перерисовки rerender(),состояние компонента изменяется на false, и он становится невидимым. На следующем этапе, во время обновления DOM, состояние меняется на true и компонент появляется снова. Это очень нерациональный способ обновления компонентов.

Я хотел бы привести два оптимальных способа обновления:

1. С помощью $forceUpdate;
2. С изменением ключей.

При использовании встроенного в Vue метода $forceUpdate, вложенные компоненты не обновляются – обновление затрагивает только экземпляры Vue.js. Мы можем вызвать обновление на глобальном уровне:

import Vue from 'vue';
Vue.forceUpdate();

А также на локальном уровне:

export default {
  methods: {
    methodThatForcesUpdate() {
      this.$forceUpdate();
    }
  }
}

Другой метод обновления основан на изменении ключей. Он гораздо предпочтительнее $forceUpdate, поскольку уведомляет Vue.js о связях между компонентами и наборами данных. Когда ключ изменяется, метод уничтожает старый компонент и создает новый, по словам разработчика в обсуждении этой проблемы на GitHub. Вы можете использовать атрибут :key, чтобы дать фреймворку знать, какой компонент связан с определенными данными. После изменения ключа Vue.js уничтожит старый компонент и создаст новый.

<template>
  <Child
    :key="key"
  />
</template>

<script>
  export default {
    data() {
      return {
        key: 0,
      };
    },
    methods: {
      forceRerender() {
        this.key += 1;
      }
    }
  }
</script>

Сторонние библиотеки и оптимизация

При разработке приложений практически невозможно обойтись без использования сторонних библиотек. Дополнительные библиотеки могут превратиться в серьезную проблему, если их не контролировать – размер пакетов будет расти, а скорость работы приложения – замедляться.

Недавно для работы над проектом я использовал компонент библиотеки Vuetify. Когда я проверил размер пакета, то обнаружил, что он превышает 500 Кб в сжатом виде. Такие размеры пакета могут радикально снизить производительность приложения. Вы можете проверить размер пакета приложения с помощью плагина webpack-bundle-analyzer. Его устанавливают выполнением следующей команды:

npm install --save-dev webpack-bundle-analyzer

И включением в файл конфигурации:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Хорошие способы оптимизации Vue-приложений

Основной пакет должен содержать лишь самые необходимые зависимости – такие как vue и vuex. Следует избегать включения в основной пакет тех библиотек, которые используются лишь в отдельных разделах приложения.

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

<template>
  <v-app>
    <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>
  <v-app-bar app>
    <!-- -->
  </v-app-bar>
 </v-app>
</template>
<script>
import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib'

export default {
  components: {
    VApp,
    VNavigationDrawer,
    VAppBar,
  }
}
</script>

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

Своевременное принятие решения об использовании Vuex

Раньше мне часто приходилось размышлять – начинать ли проект с использованием Vuex или без. Иногда мне случалось начать небольшой проект без Vuex, который представляет собой паттерн для управления состоянием – и проект превращался в хаос.

Итак, когда же необходимо использовать Vuex? Для этого надо оценить следующие факторы:

• размер проекта;
• простоту кода;
• маршрутизацию;
• набор используемых данных;
• схему вложения компонентов.

Если планируется масштабирование приложения, использование Vuex необходимо. Если у вас возникают сомнения в том, стоит ли подключать Vuex – лучше сделать это сразу. Однако, следует заметить, что появилась новость о том, что в новую версию Vue 3 включен Composition API, который заменяет Vuex.

Настройки Vuex для масштабных приложений

Vuex включает в себя четыре основных компонента:

1. Состояние – для хранения информации.
2. Геттеры – для извлечения данных.
3. Мутации – для изменения данных.
4. Действия – для манипуляций по изменению информации.

При использовании перечисленных компонентов стоит помнить, что действия всегда производят изменения. Это позволяет нам использовать инструменты, которые отслеживают изменения и возвращаются к определенным периодам в состоянии объектов и асинхронных операций для выполнения необходимых бизнес-процессов и действий.

Вы можете создать отдельные файлы для каждого из компонентов Vuex, например, так:

├── services
├── main.js
└── store
    ├── index.js          
    ├── actions.js
    ├── mutations.js
    └── Getters.js
├── components

Создание модулей для разделов приложения

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

К планированию структуры хранилища следует подходить обдуманно, чтобы не создавать путаницы. Простая модульная структура, соответствующая функциональности веб-приложения, может выглядеть так:

store/
   ├── index.js 
   └── modules/
       ├── cart
           ├── index.js          
           ├── actions.js
           ├── mutations.js       
       ├── product.js
       ├── login.js

Хорошие практики использования Vuex-модулей

По мере усложнения модулей ручной импорт и организация становятся утомительными. Рекомендуется создавать файл index.js в корневой папке каждого модуля для индексации всех файлов.

Убедитесь, что вы используете стандартный шаблон для названий файлов. Используйте, например, комбинацию слов, начинающихся с буквы в верхнем регистре, и добавляйте расширение .store.js в названия следующим образом:

modules/
       ├── cart.js
           ├── index.js   -> auto export module       
           ├── userProduct.store.js
           ├── userData.store.js

Код, связанный с бизнес-процессами или асинхронными процедурами, не должен использоваться в мутациях. Вместо этого используйте действия. Лучшей практикой считается использование геттеров вместо прямого обращения к объектам состояния. Геттеры могут обращаться к любому Vue-компоненту, используя mapGetters в качестве вычисляемого свойства; результат при этом сохраняется с учетом зависимостей. Кроме того, убедитесь, что модули имеют уникальные названия и не доступны на глобальном уровне.

Использование функций provide и inject для передачи данных

Представьте себе приложение с множеством разнообразных компонентов. Родительский компонент включает в себя вложенные компоненты. На приведенном ниже рисунке показано, что дочерние компоненты A, B, D являются компонентами верхнего уровня по отношению к вложенным компонентам C, E и F. Предположим, мы хотим использовать данные (скажем, адрес пользователя) из дочерних компонентов A, C, F в нашем родительском компоненте.

Схема взаимодействия родительского и дочерних компонентов

Для использования этих данных нам потребуется:

1. Предоставить значение родительскому компоненту (провайдеру зависимости).
2. Ввести значение в дочерний компонент F (потребитель зависимости).

Предоставим данные в родительском компоненте:

app.component('parent-component', {
  data() {
    return {
      user: {name:"Uma Victor", address:"No 33 Rumukwurushi"}
    }
  },
  provide() {
    return {
     userAddress: this.user.address
    }
  },
  template: `
    ...
  `
})

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

В нашем вложенном компоненте child-f мы используем следующий код:

app.component('child-f', {
  inject: ['userAddress'],
  template: `
    <h2>Injected property: {{ this.userAddress }}</h2>
  `
})

Если мы просто изменим параметр user.address, сделанное изменение не будет отмечено в значении компонента, поскольку данные, передаваемые с помощью функций provide и inject, изначально не являются реактивными. Для исправления этого недочета мы передадим объект reactive в функцию provide. Назначим вычисляемое свойство нашему объекту:

app.component('parent-component', {
  data() {
    return {
      user: {name:"Uma Victor", address:"No 33 Rumukwurushi"}
    }
  },
  provide() {
    return {
     userAddress: Vue.computed(() => this.user)

    }
  },
  template: `
    ...
  `
})

Такой подход гораздо проще, чем использование Vuex. Однако в Vue 3 мы можем использовать провайдеры контекста, которые дают возможность обмена информацией между многочисленными компонентами – точно так же, как Vuex.

Правильное использование компонентов форм

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

Простая форма авторизации

Исходный код у этой формы следующий:

<template>
  <div class="form-group">
  <form>
    <label for="email">Your Name</label>
    <input
      type="text"
      id="name"
      class="form-control"
      placeholder="name"
      v-model="userData.name"
    />
    <label for="email">Your Email Address</label>
    <input
      type="text"
      id="email"
      class="form-control"
      placeholder="Email"
      v-model="userData.email"
    />
    <label for="email">Your Password</label>
    <input
      type="text"
      id="password"
      class="form-control"
      placeholder="password"
      v-model="userData.password"
    />
  </form>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                userData: {
                    name: '',
                    email: '',
                    password: ''
                }
            }
        },
    }
</script>

Мы можем создать компонент BaseInput для использования во всех трех полях ввода. Шаблон этого компонента выглядит следующим образом:

<template>
 <div>
   <label v-if="label">{{ label }}</label>
   <input type="email" @value="value" @input="updateInput" v-bind="$attrs">
 </div>
</template>
<script>
    export default {
      props: {
        label: {
          type: String,
          default: ""
        },
        value: [String, Number]
      },
      methods: {
        updateInput(event) {
          this.$emit('input', event.target.value)
        }
      }
    }
</script>

Мы хотим, чтобы компонент BaseInput принимал свойство label (которое всегда является строкой), и если у Input есть свойство label, мы отобразим его в шаблоне, как показано в приведенном выше коде.

Когда мы заполняем форму, запускается метод updateInput, который принимает событие ввода в качестве аргумента. Затем метод создает событие с названием Input, и в нагрузку к нему – event.target.value, которое в нашей форме отвечает за имя:

<BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>

Директива v-model прослушивает события ввода и после совершения события передает введенные данные в userData.name. Если мы хотим создать указатель места заполнения, в Vue 2 может возникнуть ошибка, поскольку атрибуты там всегда ссылаются на родительский компонент. Для исправления этого недочета мы устанавливаем значение inheritAttrs на false и привязываем attrs.

<script>
    export default {
      inheritAttrs: false,
      props: {
        label: {
          type: String,
          default: ""
        },
        value: [String, Number]
      },
      methods: {
        updateInput(event) {
          this.$emit('input', event.target.value)
        }
      }
    }
</script>

После исправления ошибки с указателем места ввода код выглядит так:

<template>
  <div class="form-group">
    <form>
      <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>
      <BaseInput label="Your Email Address" v-model="userData.email" placeholder="Email"/>
      <BaseInput label="Your Password" v-model="userData.password" placeholder="Password"/>
    </form>
  </div>
</template>

Теперь у нас есть независимый компонент, готовый для повторного использования. Вы можете модифицировать его код на этой странице.

Примечание: $Attrs в версии Vue 3 включает в себя все прослушиватели, привязки стилей и классы.

Знакомство с Vue Devtools

Devtools в Vue.js – мощный инструмент, позволяющим проводить эффективную отладку приложения в реальном времени. Он особенно пригодится в том случае, если мы используем Vuex и хотим отслеживать все мутации и изменения в приложении. Большинство разработчиков использует Devtools в качестве браузерного приложения, но его также можно установить как отдельное приложение.

Примечание: Devtools работает только в режиме разработки, его нельзя запустить на готовом приложении, так что посторонние не смогут подсмотреть, как именно работает ваш проект.

Установка Devtools в качестве приложения

У вас может возникнуть вопрос – зачем устанавливать Devtools как отдельную программу, если его можно использовать в виде плагина для браузера. Дело в том, что если установить приложение, его можно будет использовать в любом браузере.

Устанавливаем программу так:

• Глобально:

npm install -g @vue/devtools

• Или локально:

npm install --save-dev @vue/devtools

После завершения установки выполните следующую команду:

vue-devtools

Затем в нашем файле index.html, который располагается в общей папке в корневой директории Vue.js проекта, пропишите следующий код:

<script src="http://localhost:8098"></script>

После перезагрузки приложения соединение установится автоматически.

Операции, которые позволяет осуществлять Devtools

Вот несколько полезных приемов для использования с Devtools.

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

Экран Devtools при выборе темного дизайна

Хронология проекта. В этом разделе отображаются произошедшие события. Раздел располагается рядом с «Инспектором».

Хронология событий в Devtools

Формат названий компонентов. Здесь можно выбрать формат названий – с тире или с использованием букв в верхнем регистре. С другими полезными функциями можно ознакомиться здесь.

Инструменты для ускорения работы в Vue

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

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

Тестирование – важнейший этап при создании масштабных веб-приложений. Оно помогает избежать появления багов при работе в большой команде. Для проверки Vue приложений используют три вида библиотек:

1. Тестирование компонентов – Vue Testing Library, Vue Test Utils.
2. Модульное тестирование – Jest, Mocha.
3. Сквозное тестирование (end to end, е2е) – js, Cypress.

Библиотеки компонентов

Такие библиотеки представляют собой наборы переиспользуемых компонентов, которые мы можем применять в своих приложениях для ускорения разработки пользовательского интерфейса. Подобно React и Angular, Vue имеет свои библиотеки компонентов. Вот лишь некоторые из них:

• Vue Material Kit. Крутой набор, созданный на основе Material Design от Google. Содержит более 60 компонентов.
• Buefy. Небольшая библиотека, основанная на фреймворке Bulma CSS. Если у вас нет проблем с языком Sass, она отлично подойдет.
• Vuetify. Еще один набор на основе Material Design, содержит генераторы кода для форм. Часто обновляется.
• Quasar. Набор компонентов для разработки фронтенда, подходит для создания быстрых кроссплатформенных приложений.

Другие полезные библиотеки

Другие библиотеки, которые могут пригодиться Vue-разработчику:

• FilePond. Решения для загрузки и автоматической оптимизации изображений.
• Vuelidate. Очень пригодится для работы с формами и валидации данных, вводимых пользователями. Простые и легкие компоненты.
• Vue-Clickaway. Прослушиватель для кликов мышью за пределами компонента (в самом Vue такого нет).

Хороших библиотек очень много. Найти нужную можно на таких ресурсах как madewithvuejs.com и vuejsexamples.com.

Полезные расширения при работе с Vue

Расширения значительно повышают продуктивность при написании кода в Vue. Особенно полезными являются следующие:

• Vetur. Подсветка, отладка, автозавершение кода.
• Bookmarks. Пригодится при работе над большими проектами, поскольку позволяет делать закладки, отмечать фрагменты кода и быстро переходить между ними.
• Eslint. Предупреждает об ошибках в коде.
• js Extension Pack. Набор расширений, в который входят различные полезные плагины – Prettier, Vetur, Night Owl и другие.

Заключение

В этой статье мы рассмотрели различные инструменты и советы, которые помогут вам повысить свою квалификацию в качестве Vue-разработчика. Большая часть методик, рассмотренных в этом руководстве, относится к Vue 2 – важно это помнить, чтобы не возникало недоразумений при работе с Vue 3.

Вот несколько полезных ресурсов, которые пригодятся вам для расширения знаний по темам, рассмотренным в данном руководстве.

Пользовательские директивы – официальная документация.

Реактивность в Vue.js – официальный сайт.

Официальный сайт плагина Devtools.

Обсуждение различий между Composition API и Vuex.

Полезная статья о дополнительных инструментах разработки в Vue.js.

Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!