Узнайте, как легко хранить, повторно использовать и публиковать миксины Vue с помощью Bit.
Прежде чем ты начнешь
Этот пост подходит для всех стадий разработчиков, использующих Vue JS, в том числе для новичков. Это также введение в удивительный инструмент совместного использования компонентов Vue Bit. Вот несколько предварительных условий, которые вы должны иметь перед прочтением этой статьи.
Вам понадобится следующее:
- Установлен Node.js версии 10.x и выше. Вы можете проверить это, выполнив следующую команду в терминале / командной строке:
node -v
- Также установлен Node Package Manager 6.7 или более поздней версии (NPM).
- Редактор кода: настоятельно рекомендуется Visual Studio Code. (Вот почему)
- Последняя версия Bit, глобально установленная на вашем компьютере.
npm install bit-bin -g
- Последняя версия Vue, глобально установленная на вашем компьютере.
- Vue CLI 3.0 установлен на вашем компьютере. Для этого сначала удалите старую версию CLI:
npm uninstall -g vue-cliзатем установите новый:
npm install -g @vue/cli- Загрузите стартовый проект Vue Mixins здесь
- Разархивируйте загруженный проект
- Перейдите в распакованный файл и запустите команду, чтобы поддерживать все зависимости в актуальном состоянии:
npm install
Что такое миксины Vue
Примеси в Vue - это, по сути, фрагмент определенной логики, хранящейся в Vue определенным образом, которую можно повторно использовать снова и снова, чтобы добавить функциональность к вашим экземплярам и компонентам Vue. Таким образом, миксины Vue могут совместно использоваться несколькими компонентами Vue без необходимости повторять блоки кода в проекте. Любой, кто использовал препроцессор CSS под названием SASS, имеет хорошее представление о миксинах.
Демо
Если вы следили за этим постом с самого начала, вы, должно быть, получили стартовое приложение Mixins по ссылке GitHub, указанной выше. Внутри папки компонентов вы увидите два компонента:
Компонент выше отображает кнопку, при нажатии на которую отображается модальное предупреждение. Второй компонент ниже делает то же самое:
Таким образом, с Vue Mixins вы можете просто сохранить логику, которую вы будете использовать снова и снова в качестве миксина, а затем просто импортировать ее в любой компонент, в котором вы хотите ее использовать. Однако этот компонент должен быть в том же проекте.
4 этапа создания миксинов Vue
При создании миксина Vue необходимо выполнить четыре шага:
Создание файла миксина
Файлы микширования - это просто файлы javascript, которые вы можете экспортировать, которые содержат логику или функции, которые вы хотите использовать повторно. Создайте новую папку с именем Mixins внутри папки src и создайте внутри нее файл с именем clickMixin.js. Вставьте в него приведенный ниже код.
Это именно та функциональность, которую нам приходилось использовать дважды, теперь, когда мы сделали ее миксином, теперь ее можно использовать повторно.
Импорт файла Mixin
Следующим этапом является импорт файла миксина в тот компонент, в котором он нужен. В нашем случае он находится внутри двух компонентов, которые мы хотим импортировать. Импортируйте clickMixin внутри двух компонентов с помощью следующей команды:
import clickMixin from ‘../Mixins/clickMixin’
Удаление повторяющейся логики
Теперь, когда вы импортировали файл миксина в свои компоненты, вам больше не нужна повторяющаяся логика. Итак, удалите повторяющуюся логику из двух компонентов.
// remove this code block and the comma before it.
methods: {
clicked(value){
alert(value);
}
}
Зарегистрируйте Mixin
Последний шаг - сообщить Vue, что у вас есть готовый миксин, зарегистрировав его. Примеси во Vue по умолчанию регистрируются как массивы, как показано ниже:
После добавления этой опции миксинов к вашим двум компонентам запустите приложение.
npm run serve
Полную статью о миксинах в Vue JS можно найти действительно полезной.
Ограничения миксинов Vue
Миксины решают очень большую проблему повторного использования, с которой мы часто сталкиваемся при написании кода. У нас есть платформа, на которой мы можем хранить логику таким образом, чтобы мы могли ее повторно использовать, и нам больше не нужно повторяться. Эта платформа также очень проста в использовании, но что происходит, когда мы хотим расширить охват миксинов? Что, если мы хотим иметь возможность совместно использовать миксины в нескольких проектах, представьте, насколько мощной может быть абстрактная логика, такая как миксины, если ее можно использовать в нескольких проектах. К сожалению, мы не можем этого сделать с миксинами Vue.
Представляем Bit.dev
Bit - это очень мощный и простой в использовании инструмент, который был создан, чтобы помочь командам легко обмениваться и управлять компонентами кода в проектах и между ними. Мы уже знали, насколько эффективным может быть повторное использование кода, когда мы узнали о миксинах. Bit похож на передовую технологию миксинов в облаке - подумайте о GitHub для компонентов (или еще лучше, GitHub + NPM для компонентов)
В последнее время все больше и больше команд разработчиков распределяются, и в результате появляется все больше технологий для поддержки глобального сотрудничества. Bit - это революционный инструмент, который хорошо позиционируется как инструмент совместного использования кода в облаке. Это помогает группам масштабировать общие компоненты до сотен и даже тысяч компонентов, устраняя при этом накладные расходы, связанные с этим процессом. Давайте использовать Bit, чтобы поделиться нашим уже созданным clickMixin в нескольких проектах.
Начиная
Перейдите на официальную страницу Bit и создайте учетную запись, это бесплатно.
Установите Bit на свой компьютер глобально:
npm install bit-bin -gБит инициализации
Выберите существующий репозиторий, содержащий компоненты, которыми вы хотите поделиться и повторно использовать, и Инициализировать рабочую область Bit в каталоге проекта. В нашем случае это папка миксина Vue на вашем компьютере. Откройте терминал внутри VS Code и введите команду ниже:
bit initОн спросит вас, хотите ли вы анонимно отправлять аналитические отзывы в Bit, чтобы они продолжали улучшать проект, вы можете выбрать да или нет. Затем вы должны увидеть сообщение об успешном завершении в командной строке.
successfully initialized a bit workspace.
Битовые команды настолько просты и похожи на команды Git, что вам не придется читать какие-либо новые документы.
Компоненты отслеживания
Следующим шагом будет отслеживание выбранных вами компонентов с помощью Bit, это может быть вся ваша папка компонентов или любой конкретный компонент по выбору. В нашем случае мы хотим отслеживать папку миксинов, в которой находятся все ваши миксины. Мы делаем это с помощью команды добавления битов следующим образом:
bit add src/Mixins/*
Это делает что-то похожее на Git add для отслеживания изменений. Он должен показать имя миксина, за которым он следит, вот так:
tracking component click-mixin:
Пометка версии компонента
Чтобы установить версию для ваших компонентов, используйте команду bit tag.
Bit блокирует состояние каждого графа зависимостей компонента, делая его версию неизменной. При маркировке компонентов Bit сначала запускает задачи сборки и тестирования для компонентов.
Вы можете использовать флаг --all, чтобы пометить все компоненты в рабочей области.
bit tag --all 1.0.0После добавления тегов вы должны увидеть следующее сообщение об успешном выполнении:
1 component(s) tagged | 1 added, 0 changed, 0 auto-tagged added components: [email protected]
Экспорт компонентов
Теперь, когда наши компоненты отслеживаются и отслеживаются версии, экспортируйте (опубликуйте) их в удаленную коллекцию. Зайдите на официальную домашнюю страницу Bit и создайте коллекцию. Коллекция похожа на корзину репозитория, в которой размещаются и упорядочиваются ваши компоненты.
Используйте команду bit export, чтобы опубликовать компоненты из вашей рабочей области в bit.dev:
bit export user-name.collection-nameОн запросит ваше имя пользователя Bit и пароль и после аутентификации отправит его в облако. Теперь вы можете перейти к фрагменту, чтобы просмотреть свой миксин в своей удаленной коллекции, которая является общедоступной (если вы настроили ее таким образом), как и общедоступные репозитории GitHub.
Использование миксинов в других проектах
Чтобы использовать миксин, которым вы поделились в облаке, в любом другом проекте:
- Установите миксин внутри желаемого проекта.
- Импортируйте миксин в частичный компонент, в котором вы хотите его использовать.
И миксин можно использовать так же, как он был частью вашей кодовой базы.
Давайте создадим новый проект и добавим в него этот клик-миксин. Создайте новый проект Vue или загрузите этот стартовый проект Vue Mixins.
Все, что вам нужно сделать, это установить миксины в облаке внутри вашего проекта, используя ваш любимый менеджер пакетов, NPM или yarn. Внутри вашей коллекции миксинов («репо») Bit проделал всю грязную работу по упаковке и предоставлению команды установки.
npm install @bit/viclotana.vue_collection.click-mixin
Теперь, когда вы установили миксин в новый проект, вы можете импортировать миксин прямо из узловых модулей, где находится миксин. На этом этапе перейдите к двум компонентам и скопируйте их внутри них:
<template>
<div>
<button v-on:click=”clicked(‘you just clicked on button 2’)”>Button 2</button>
</div>
</template>
<script>
import clickMixin from ‘@bit/viclotana.vue_collection.click-mixin’
export default {
name: ‘Modal’,
mixins: [clickMixin]
}
</script>
Когда вы запустите приложение на своем сервере разработки, вы увидите, что оно работает точно так же, как миксины внутри проекта.
Заключение
Вы познакомились с Bit как с мощным инструментом для совместного использования компонентов. Вы также увидели, как его можно использовать для расширения возможностей миксинов Vue в вашем рабочем процессе при работе над несколькими проектами или при работе с командами.
Не стесняйтесь писать мне в комментариях ниже 😃
