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

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

Примечание. Эта статья предназначена как для начинающих, так и для опытных разработчиков, которые хотят улучшить свои навыки работы с Vue.js. Базовые знания JavaScript и Vue.js будут очень полезны при работе с этим руководством.

Модульное и файловое структурирование проекта

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

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

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

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

 +-- 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/

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

Существует два способа организации модулей:

1. основные модули Vue.js,
2. Модули функций приложения.

Основные модули 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 для импорта и использования плагинов, связанных только с модулем выплат. Папка ресурсов содержит все ресурсы (изображения и стили) для модуля. Наша папка компонентов содержит компоненты, связанные с функцией выплат. Папка store содержит наши действия, мутации и геттеры, используемые для управления состоянием этой функции. Существует также тестовая папка для тестирования этой функции.

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

Директивы в Vue.js — это способ сказать Vue.js что-то сделать или продемонстрировать определенное поведение для нас. Примерами директив являются v-if , v-model , v-for и т. д. В нашем приложении Vue.js, когда мы используем что-то вроде v-model для привязки данных к входным данным в форме, мы даем Vue.js закодировать некоторые определенные инструкции, характерные для Vue.js. Но что, если нам нужно определенное действие или поведение, которое наша директива Vue.js не позволяет нам делать, что мы тогда делаем? Мы можем создать то, что мы называем пользовательскими директивами.

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

Мы можем пойти о регистрации директив двумя способами:

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

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

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

Наш шаблон выглядит примерно так:

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

Лучшие практики при написании пользовательских директив

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

Если мы используем CLI-сборку Vue.js, пользовательские директивы должны находиться в файле main.js , чтобы все файлы .vue могли иметь к нему доступ. Имя вашей директивы должно быть чем-то, что резонирует с тем, что делает эта конкретная директива, очень описательным о функциональности директивы.

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

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

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

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

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

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

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

 <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( ), состояние show устанавливается в false , и компонент больше не визуализируется. На следующем тике, который представляет собой один цикл обновления DOM, для show устанавливается значение true , и наш компонент снова визуализируется. Это очень хакерский способ повторного рендеринга.

Я хотел бы поговорить о двух законных способах, которыми это можно сделать:

1. $forceUpdate Vue.
2. Шаблон смены ключей.

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

Глобально мы можем принудительно обновить:

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

И локально тоже:

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

Еще один способ сделать это — использовать шаблон изменения ключа, который намного лучше, чем метод $forceUpdate . Причина того, что шаблон изменения ключа лучше, заключается в том, что он позволяет Vue.js узнать, какой компонент привязан к конкретным данным, и когда ключ изменяется, он уничтожает старый компонент, чтобы создать новый, согласно matthiasg в этой проблеме Github. Я столкнулся. Вы можете использовать атрибут :key , чтобы сообщить Vue.js, какой компонент прикреплен к определенному фрагменту данных. Когда ключ меняется, это заставляет 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 только для управления состоянием в вашем приложении. Если вы когда-либо сомневались, следует ли вам использовать менеджер состояний при запуске проекта, просто используйте его. Однако ходят разговоры о том, что новый API композиции Vue3 заменит vuex.

Как следует настраивать 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 в корне вашего модуля, объединяя файлы вместе.

Убедитесь, что в вашем магазине используется стандартный шаблон именования, так как это повысит удобство обслуживания. Вы можете использовать camelCase для именования модулей, а затем расширение .store.js . Пример: CartData.store.js .

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

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

Использование метода Provide/Inject для передачи данных

Подумайте о приложении, которое состоит из разных компонентов. У нас есть родительский компонент, а у родительского компонента есть много дочерних компонентов. На изображении ниже мы видим наши дочерние компоненты A, B и D в качестве верхних компонентов, затем мы видим компонент E, вложенный в компонент D, и компонент F, вложенный в компонент E. Что, если у нас есть данные приложения (например, адрес пользователя), которые мы хотим использовать в дочерних компонентах 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 на другой адрес, это изменение не будет отражено в нашем введенном значении, потому что данные, предоставленные для предоставления/вставки, изначально не являются реактивными. Мы можем исправить это, передав 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.

Однако с Vue3 и недавним обновлением мы теперь можем использовать провайдеров контекста, что позволяет нам обмениваться данными между несколькими компонентами так же, как vuex.

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

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

С кодом:

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

Мы хотели бы иметь компонент BaseInput , который мы могли бы использовать для ввода трех форм выше. Наш 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 , которое всегда является строкой, и если у ввода есть метка, мы показываем ее в нашем шаблоне, как показано выше.

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

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

v-model будет прослушивать событие ввода, а затем, когда она его получит, установит для нашего userData.name полученную полезную нагрузку.

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

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

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

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

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

Вам может быть интересно, зачем нам устанавливать отдельное приложение для инструментов разработки, когда мы можем использовать для него расширение браузера? Это потому, что когда вы устанавливаете его как отдельное приложение локально, вы можете использовать его из любого браузера.

Мы устанавливаем его:

 // Globally npm install -g @vue/devtools // or locally npm install --save-dev @vue/devtools

После завершения установки запустите:

 vue-devtools

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

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

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

Некоторые операции, которые мы можем выполнять с помощью Vue Devtools

Вот несколько полезных операций, которые вы можете выполнять в Vue.js DevTools.

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

• Лента новостей
  На новой временной шкале в devtools отображается информация о происходящих событиях в хронологическом порядке. Он расположен рядом с окном инспектора и настроек.

• Имя компонента формата
  Вы можете выбрать отображение имени компонента в CamelCase или kebab-Case.

Есть много других операций, которые вы можете использовать в vue devtools. Вы можете проверить их список изменений.

Инструменты, облегчающие работу в Vue

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

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

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

• Тестирование компонентов
  Библиотека тестирования Vue, утилиты тестирования Vue.
• Модульное тестирование
  Шутка, Мокко.
• Сквозные тесты
  Nightwatch.js, Кипарис.

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

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

• Комплект материалов Vue
  «Крутой» набор пользовательского интерфейса Vue.js, построенный на материальном дизайне. Он содержит более 60 компонентов ручной работы.
• Буффи
  Облегченная библиотека компонентов, основанная на фреймворке Bulma CSS. Если вам удобно работать с SASS, у вас не возникнет проблем с его использованием.
• Vuetify
  Это тоже фреймворк компонентов материального дизайна с наличием уже сделанных каркасов для кода, с большим комьюнити и регулярными обновлениями
• Квазар
  Мой личный фаворит, когда дело доходит до структуры компонентов. Quasar с его высокопроизводительным интерфейсным стеком позволяет создавать кроссплатформенные приложения для Интернета, мобильных устройств и настольных компьютеров.
  

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

Другие заслуживающие внимания библиотеки:

• ФайлПруд
  Эта библиотека Vue.js загружает любое изображение, которое вы ей даете, и оптимизирует эти изображения с гладкой шелковистой работой.
• Подтвердить
  Эта библиотека очень важна при работе с формами, и вам нужен способ проверки ввода данных пользователем во внешнем интерфейсе. Это простая и легкая проверка на основе модели.
• vue-Clickaway
  Vue не имеет встроенного прослушивателя событий, чтобы знать, когда пользователь щелкнул за пределами элемента, например, в раскрывающемся списке, поэтому существует vue-clickaway для обнаружения событий щелчка.

Есть еще много библиотек. Вы можете проверить множество из них на madewithvuejs.com и vuejsexamples.com .

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

Расширения — это действительно полезные инструменты, которые могут значительно повысить вашу повседневную производительность при написании vuejs. За то время, что я потратил на написание кода Vuejs, я нашел следующие расширения очень полезными:

• Ветур
  Это расширение номер один в моем списке. Экономит мне часы при написании Vuejs. Он обеспечивает специальное выделение, фрагменты, Intellisense, отладку и многое другое для Vue.js.
• Закладки
  Это расширение очень удобно при работе над большим проектом, потому что вы можете отмечать и устанавливать закладки в местах своего кода и переходить к этому конкретному месту, когда захотите.
• Эслинт
  Eslint помогает нам легко находить ошибки в коде, выдавая предупреждение, если мы делаем что-то не так в коде. Желательно использовать его в более красивом формате.
• Пакет расширений Vue.js
  Этот пакет расширений содержит набор других расширений, которые помогут вам в разработке Vue.js, таких как Prettier, Vetur, Night Owl и т. д.

Заключение

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

Имейте в виду, что большая часть того, что вы узнали в этой статье, сосредоточена на Vue.js 2, чтобы избежать недоразумений.

Дополнительные ресурсы

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

• «Пользовательские директивы», Официальная документация
• «Реактивность Vue», Официальная документация
• «Vue Devtools», веб-сайт
• Разговор о Composition API и Vuex
• Полезные инструменты vue javascript development by Timi Omoyeni