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

Инструменты и приемы для ускорения разработки на 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-приложений
  • Своевременное принятие решения об использовании Vuex
    • Настройки Vuex для масштабных приложений
  • Создание модулей для разделов приложения
    • Хорошие практики использования Vuex-модулей
  • Использование функций provide и inject для передачи данных
  • Правильное использование компонентов форм
  • Знакомство с Vue Devtools
    • Установка Devtools в качестве приложения
    • Операции, которые позволяет осуществлять Devtools
  • Инструменты для ускорения работы в Vue
    • Библиотеки для тестирования
    • Библиотеки компонентов
    • Другие полезные библиотеки
    • Полезные расширения при работе с 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.

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

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

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

    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();
        }
      }
    }
    

    Создание приложений с помощью Vue CLI

    Другой метод обновления основан на изменении ключей. Он гораздо предпочтительнее $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 JS

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

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

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

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

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

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

    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 делает создание первоклассных форм очень простым занятием: надо лишь знать, как правильно использовать компоненты. В любом веб-приложении, в котором используются формы для регистрации и авторизации, мы хотим реализовать взаимосвязь поведения и дизайна. Взглянем, к примеру, на страницу авторизации, продемонстрированную ниже.

    Инструменты и приемы для ускорения разработки на 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>
    

    Приступая к работе с Vuex: руководство для начинающих

    Мы хотим, чтобы компонент 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.

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

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

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

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

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

    Хронология событий в 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.

    Источник: www.internet-technologies.ru