Раскройте возможности совместного использования компонентов Vue: подробное руководство по использованию Bit
Публикация компонентов Vue иногда может быть сложной задачей, особенно когда речь идет об управлении зависимостями, документацией и управлением версиями. В этой статье мы рассмотрим, как Bit, мощный инструмент для разработки на основе компонентов, может правильно упростить процесс публикации компонентов Vue. Благодаря таким функциям, как автоматическое управление зависимостями, создание документации, бесшовная интеграция с более крупными проектами, простое управление версиями и многое другое, Bit предлагает эффективное решение для совместного использования компонентов и совместной работы.
Эта статья будет вам полезна, если...
👉 Если вам когда-либо приходилось копировать код компонента из одного проекта в другой, потому что вам нужно было что-то похожее в вашем текущем проекте.
👉 Если вам сложно публиковать свои компоненты Vue.
👉 Если после установки компонента в ваш проект вам пришлось столкнуться с проблемами зависимостей.
👉 Если вас когда-либо смущал процесс публикации компонентов Vue.
👉 Если вы разработчик Vue или используете какой-либо JavaScript-фреймворк
Знакомство с Битом
Bit — инструмент с открытым исходным кодом для создания компонентно-ориентированного программного обеспечения; это упрощает обмен, документирование и совместную работу над отдельными компонентами. Bit позволяет разработчикам изолировать компоненты от своих проектов, что позволяет повторно использовать их в различных проектах и командах. Этим компонентом могут быть приложения, страницы, компоненты пользовательского интерфейса, серверные службы или даже контент. С Bit вы можете думать о компонентах практически все, и он поддерживает различные библиотеки внешнего интерфейса, включая React, Angular и, конечно же, Vue.js. С Битом вы можете:
- Компоненты версий: Bit автоматически обнаруживает изменения в ваших компонентах и создает новые версии. Это позволяет легко отслеживать изменения и при необходимости откатиться к предыдущим версиям.
- Публикация компонентов. Bit позволяет легко публиковать ваши компоненты в Bit Cloud или других автономных сервисах по вашему выбору. Это делает ваши компоненты доступными для установки и использования другими разработчиками.
- Управление зависимостями: Bit автоматически обнаруживает зависимости между вашими компонентами и управляет ими за вас. Это означает, что вам не нужно беспокоиться об обновлении зависимостей вручную при публикации новой версии ваших компонентов.
- Компоненты документа: Bit упрощает создание документации для ваших компонентов. Эта документация может быть автоматически сгенерирована из кода вашего компонента или вы можете создать ее вручную.
- Просмотр компонентов: Bit упрощает предварительный просмотр компонентов в браузере. Это позволяет легко тестировать ваши компоненты и получать отзывы от других разработчиков.
👉 Узнайте больше о Bit и его предложениях из документации.
Давайте попробуем на кратком примере того, как компоненты могут быть опубликованы с помощью Bit.
Как публиковать компоненты Vue с помощью Bit: шаг за шагом
Теперь, когда мы рассмотрели преимущества использования Bit, давайте рассмотрим процесс публикации компонента Vue с использованием Bit:
Необходимое условие:
- Вы должны иметь базовые знания Vue и TypeScript.
- На вашем компьютере должен быть установлен Node.js, желательно последней версии.
- На вашем компьютере должен быть установлен Bit.
- Вам необходимо будет создать учетную запись Bit Cloud.
- Создайте Объем в учетной записи Bit Cloud.
Базовая установка
Я начал с установки Bit на свой компьютер. Вы можете сделать это, используя команду ниже
npx @teambit/bvm install
Инициализация рабочей области
Прежде чем вы сможете создать компонент, вам необходимо создать рабочее пространство Bit. Рабочая область содержит файлы и каталоги, необходимые для создания, составления, обслуживания и совместной работы компонентов. В рабочей области может находиться более одного компонента.
Запустите команду ниже в своем терминале, чтобы создать рабочую область для ваших компонентов Vue:
Синтаксис:
bit new vue [workspace-name] --env teambit.vue/vue --default-scope [bit.cloud username].[scope-name]
Команда:
bit new vue sample-button --env teambit.vue/vue --default-scope aviatorscode2.vue-button
Перейдите к открытию рабочей области с помощью редактора кода по вашему выбору.
Создайте компонент Vue
Внутри вашего рабочего пространства создайте свой первый компонент Vue, используя шаблон vue вашего окружения, выполнив команду ниже:
Синтаксис:
bit create vue [component-name]
Команда:
bit create vue ui/my-button
Вот структура папок только что созданного компонента кнопки.
После создания компонента Vue выполните приведенную ниже команду, чтобы установить все зависимости рабочей области.
bit install
Реализация кода
В файле themy-button.vue приступайте к реализации кода вашего компонента. Вы можете изменить его по своему вкусу. Мой — это простой компонент кнопки со счетчиком.
<script setup lang="ts">
import { ref } from "vue";
defineProps({
title: {
type: String,
default: "",
},
});
const count = ref(0);
</script>
<template>
<button @click="count++">
{{ title }}: {{ count }}
</button>
</template>
<style scoped>
button {
display: inline-flex;
border-width: 1px;
border-style: solid;
color: rgb(255 255 255);
background-color: rgb(59 130 246);
border: transparent;
}
button:hover {
background-color: rgb(37 99 235);
}
</style>
Создайте композицию для вашего компонента
Композиция гарантирует, что ваш компонент будет работать должным образом при предварительном просмотре. Это важно, поскольку поможет другим разработчикам понять, как работает ваш компонент и как они могут его использовать.
Bit по умолчанию создает для вас композицию, используя демонстрационный компонент, который он создает при создании нового компонента Vue. Однако вам нужно будет отредактировать его, чтобы отразить конкретный созданный вами компонент. Допустим, вы создали компонент карты с разными вариантами. Вам нужно будет визуализировать компонент карты в файле композиции, передав соответствующие реквизиты, необходимые для работы различных вариантов. Это гарантирует, что при предварительном просмотре вашей композиции разработчики смогут увидеть ее в действии.
Для этого перейдите в файлmy-button-basic.fixture.vue, импортируйте компонент кнопки и отрендерите его, передав необходимые реквизиты.
<script setup> import MyButton from "./my-button.vue"; </script> <template> <MyButton title="Hello World" /> </template>
Затем в файлеmy-button.composition.ts будет собрана и отображена композиция.
import BasicMyButton from "./my-button-basic.fixture.vue";
export { BasicMyButton };
Когда мы запустим bit start, вы увидите, как будет отображаться компонент кнопки.
Документация
Что такое компонент без документации? Каждый компонент Bit имеет файл документации по умолчанию, который можно редактировать. Самое приятное то, что он находится в Markdown, поэтому вам не нужно начинать изучать новый навык, чтобы его использовать. Он находится в файле my-button.docs.mdfile.
--- labels: ['vue'] description: A MyButton component. --- A component that does something special and renders text in a div. ### Component usage ```vue <template> <MyButton title="Hello World!" /> </template> ```
Тестирование
Тестовые файлы имеют решающее значение для поддержания качества и надежности компонента, особенно при внесении изменений. Вы хотите быть уверены, что все отправляемые вами компоненты были хорошо протестированы и работают должным образом. Bit предоставляет тестовый файл для каждого компонента, в данном случае это файл my-button.spec.ts. Этот файл содержит тесты компонента. Здесь вы определяете различные тестовые примеры, чтобы гарантировать, что компонент работает должным образом.
Bit рекомендует использовать ваши композиции в качестве основы для ваших тестов, используя Библиотеку тестирования Vue в качестве тестовых утилит.
import { render } from "@testing-library/vue";
import { BasicMyButton } from "./my-button.composition";
it("should render with the correct text", () => {
const { getByText } = render(BasicMyButton);
const rendered = getByText(/Hello World/);
expect(rendered).toBeTruthy();
});
Чтобы проверить, прошел ли ваш тест, выполните команду ниже
bit test
Если в вашем тесте есть ошибка, вы не сможете пометить или экспортировать свой компонент.
Прежде чем создавать версию компонента, давайте посмотрим, как он выглядит на сервере разработки, запустив
bit start
Эта команда развернет ваше рабочее пространство локально на http://localhost:3000.
Управление версиями вашего компонента
Каждый экспортируемый компонент должен быть помечен версией выпуска. Это здорово, потому что вы всегда можете обратиться к предыдущей версии или вести учет изменений, внесенных в определенный компонент с течением времени.
Помечая компонент в Bit, вы создаете автономный (независимый) компонент со своими собственными зависимостями, стилями, тестами и всеми другими требованиями к сущности, необходимыми для его работы, которые можно совместно использовать независимо.
Вы можете пометить отдельный компонент в рабочей области Bit с помощью этой команды:
bit tag [component-id] --message "initial commits"
Чтобы пометить все компоненты в вашем рабочем пространстве одновременно. Запустите эту команду:
bit tag
Если вы не укажете шаблон выпуска для своего компонента, Bit сделает это за вас автоматически. Чтобы указать версию выпуска для вашей команды, используйте следующую команду:
bit tag [component-id]@1.0.0 --message "initial commits"
Публикация вашего компонента Vue
Прежде чем вы сможете экспортировать свой компонент Bit в облако, вам необходимо создать область для вашего компонента в Bit Cloud. Имя вашей области должно быть таким же, как то, которое вы использовали при создании рабочей области Bit (см. разделinitialize your workspace).
При создании рабочего пространства я использовал область по умолчанию aviatorscode2.vue-button, где областью была vue-button. Вы можете подтвердить это в своем файле workspaceworkspace.jsonc.
Итак, теперь мне нужно перейти в Bit Cloud, чтобы создать область под названием vue-button.
Введите имя вашей области.
Нажмите «Create», чтобы создать свою область действия.
Сейчас он пуст, потому что мы еще не экспортировали никаких компонентов.
Экспортируйте свой компонент
Теперь, когда у вас есть настройка области действия, вы можете вернуться к своему проекту, чтобы экспортировать уже помеченный компонент.
Запустите эту команду, чтобы экспортировать ваш компонент
bit export
Ваше рабочее пространство Bit экспортирует только помеченные компоненты.
Если у вас возникли проблемы с экспортом компонента, возможно, это связано с тем, что вы не вошли в Bit Cloud в своем редакторе кода. Для этого запустите команду bit login, следуйте инструкциям, и все будет в порядке.
Когда вы вернетесь к своей битовой области, нажмите «Обновить», и вы увидите там свой компонент.
Интеграция вашего компонента с другими проектами
Теперь, когда ваш компонент запущен, он доступен всем, кто хочет использовать его в своих проектах. Для этого все, что им нужно сделать, это либо установить/импортировать/разветвить компонент в рабочую область своего проекта.
А благодаря тому, как Bit обращается с компонентами, каждый компонент имеет зависимости, необходимые для его работы, поэтому у вас не возникнет проблем с конфликтами зависимостей. Однако в тех случаях, когда вы хотите изменить импортированный компонент, вы можете это сделать.
Используя команды установки, разветвления или импорта, вы можете перенести этот компонент в свое рабочее пространство.
Например, вот как можно использовать компонент кнопки внутри другого проекта после его установки.
import { MyButton } from "aviatorscode2.vue-button/ui/my-button"
И это все. Теперь вы можете использовать этот компонент в своем проекте, просто импортировав его, как и другие компоненты Vue.
Заключение
Правильная публикация компонентов Vue предполагает больше, чем просто совместное использование кода — речь идет о том, чтобы сделать компоненты доступными, понятными и гибкими для других разработчиков. Bit предлагает мощное решение, упрощающее управление компонентами, документацию, предварительный просмотр и управление версиями. С помощью Bit разработчики Vue могут легко публиковать компоненты, способствовать сотрудничеству и обеспечивать широкое использование своих хорошо созданных творений. Итак, если вы хотите эффективно делиться своими компонентами Vue, рассмотрите возможность использования Bit в качестве платформы управления компонентами.
Часто задаваемые вопросы
Вопрос 1. Подходит ли Bit для небольших проектов?
А: Абсолютно! Гибкость Bit делает его подходящим как для небольших, так и для крупных проектов.
Вопрос 2. Могу ли я использовать Bit с другими платформами JavaScript?
О: Да, Bit поддерживает несколько платформ, что делает его универсальным для различных сред разработки.
Вопрос 3. Является ли Bit открытым исходным кодом?
О: Да, Bit имеет открытый исходный код и имеет активное сообщество участников.
Вопрос 4. Как Bit обрабатывает конфликты слияния компонентов?
О: Bit использует git-драйвер Bit для лучшей обработки конфликтов слияния. Драйвер автоматически объединит файлы.bitmap и отметит конфликт слияния как разрешенный.
Вопрос 5. Где я могу узнать больше о расширенных функциях Bit?
О: Изучите официальную документацию Bit для получения подробной информации о расширенных функциях и вариантах использования.
