Инструменты и приемы для ускорения разработки на 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.
- Структура проекта: модульная или файловая
- Организация модулей
- Использование пользовательских директив
- Управление обновлениями
- Сторонние библиотеки и оптимизация
- Своевременное принятие решения об использовании Vuex
- Создание модулей для разделов приложения
- Использование функций provide и inject для передачи данных
- Правильное использование компонентов форм
- Знакомство с Vue Devtools
- Инструменты для ускорения работы в Vue
- Заключение
Структура проекта: модульная или файловая
Давайте начнем со структуры проекта и рассмотрим, как структурировать файлы и модули, и почему файловая структура хуже подходит для масштабируемых проектов, по сравнению с модульной.
Во время создания нового проекта с помощью сборщика 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.
Если же мы хотим, чтобы директивы выполняли какие-то другие действия, не определенные разработчиками фреймворка, мы можем создать свои собственные, кастомные директивы.
Регистрация пользовательских директив и хуков
Объявить кастомные директивы можно двумя способами:
- Глобально – в нашем файле js.
- Локально – в нашем компоненте.
Хуки в директивах срабатывают, как методы – при наступлении определенного события. Фреймворк 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 и компонент появляется снова. Это очень нерациональный способ обновления компонентов.
Я хотел бы привести два оптимальных способа обновления:
- С помощью $forceUpdate;
- С изменением ключей.
При использовании встроенного в 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 включает в себя четыре основных компонента:
- Состояние – для хранения информации.
- Геттеры – для извлечения данных.
- Мутации – для изменения данных.
- Действия – для манипуляций по изменению информации.
При использовании перечисленных компонентов стоит помнить, что действия всегда производят изменения. Это позволяет нам использовать инструменты, которые отслеживают изменения и возвращаются к определенным периодам в состоянии объектов и асинхронных операций для выполнения необходимых бизнес-процессов и действий.
Вы можете создать отдельные файлы для каждого из компонентов 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 в нашем родительском компоненте.
Схема взаимодействия родительского и дочерних компонентов
Для использования этих данных нам потребуется:
- Предоставить значение родительскому компоненту (провайдеру зависимости).
- Ввести значение в дочерний компонент 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 приложений используют три вида библиотек:
- Тестирование компонентов – Vue Testing Library, Vue Test Utils.
- Модульное тестирование – Jest, Mocha.
- Сквозное тестирование (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.