UI-kit на Vue.js для 1С-Битрикс: разработка и внедрение под ключ

Когда на Битрикс-проекте работает команда из 5+ разработчиков, а каталог насчитывает десятки тысяч товаров, интерфейс начинает напоминать лоскутное одеяло: кнопки в разных шаблонах выглядят по-разному, модальные окна реализованы тремя способами, а уведомления — четырьмя?

Каждый новый компонент пишется с нуля, потому что общего стандарта нет. Мы накопили опыт решения этой проблемы в десятках проектов — и знаем, что UI-kit на Vue.js с единым API и документацией устраняет хаос.

Разработка UI-kit под ключ позволяет сократить время на создание новых фич, улучшить консистентность интерфейса и упростить онбординг новых разработчиков. Ниже — как мы проектируем и разрабатываем UI-kit на Vue.js для проектов 1С-Битрикс, с реальным кейсом и этапами работы.

Что такое UI-kit и зачем он нужен в Битрикс-проекте

UI-kit — это библиотека переиспользуемых Vue-компонентов с единым визуальным языком. В неё входят базовые элементы: кнопки, поля ввода, модальные окна, уведомления, иконки, типографика. Каждый компонент инкапсулирует верстку, стили и поведение. В контексте 1С-Битрикс это особенно важно, потому что каждый шаблон компонента может писаться разными разработчиками, и без UI-kit согласованность теряется.

Архитектура библиотеки

Структура типового UI-kit:

/local/js/ui-kit/
├── src/
│   ├── components/
│   │   ├── UiButton.vue
│   │   ├── UiInput.vue
│   │   ├── UiModal.vue
│   │   ├── UiToast.vue
│   │   └── ...
│   ├── composables/
│   │   ├── useModal.js
│   │   └── useToast.js
│   ├── tokens/
│   │   └── design-tokens.css
│   └── index.js
├── dist/
└── vite.config.js

Библиотека собирается через Vite в формате UMD:

// vite.config.js
export default {
    build: {
        lib: {
            entry: './src/index.js',
            name: 'BitrixUIKit',
            formats: ['umd'],
            fileName: 'ui-kit',
        },
        rollupOptions: {
            external: ['vue'],
            output: { globals: { vue: 'Vue' } }
        }
    }
}

Дизайн-токены и CSS-переменные

Все цвета, отступы, радиусы и тени хранятся как CSS-переменные. Компоненты используют токены, а не хардкод. Это позволяет менять тему без изменения компонентов:

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --radius-button: 6px;
  --shadow-modal: 0 20px 60px rgba(0,0,0,.2);
}

Типовой набор компонентов для e-commerce:

Какие этапы включает разработка UI-kit?

Вот пошаговая инструкция для интеграции UI-kit в проект:

1. Проведите аудит существующего UI — инвентаризация всех элементов, выявление дублей.
2. Спроектируйте дизайн-систему — зафиксируйте токены, состав компонентов, их варианты и состояния.
3. Разработайте компоненты на Vue 3 с Composition API, типизация props, инкапсуляция логики.
4. Настройте сборку через Vite в UMD-формат с внешней зависимостью Vue.
5. Интегрируйте библиотеку в шаблон Битрикса с помощью AddHeadScript и монтируйте в нужных точках.

Интеграция с шаблоном:

use Bitrix\Main\Page\Asset;
$asset = Asset::getInstance();
$asset->addJs('/local/js/ui-kit/dist/ui-kit.umd.js');
$asset->addCss('/local/js/ui-kit/dist/ui-kit.css');

Как говорится в документации Vue?

js, компоненты — это переиспользуемые экземпляры, и UI-kit реализует этот принцип на практике.

Почему стоит инвестировать в UI-kit?

UI-kit решает три ключевые проблемы. Первая — скорость разработки: новый шаблон собирается из готовых компонентов, а не пишется с нуля. Вторая — консистентность: пользователь видит одинаковые кнопки и формы на всём сайте, что повышает доверие. Третья — лёгкий онбординг: новый разработчик знакомится с библиотекой компонентов за пару дней, а не разбирается в 12 вариантах одной кнопки. Наш опыт показывает: после внедрения UI-kit время создания нового функционала сокращается на 30–50%, а количество багов, связанных с интерфейсом, падает практически до нуля. Библиотека сопровождается документацией (минимум README, в крупных проектах — Storybook) и поддерживается в актуальном состоянии. За счёт переиспользования компонентов стоимость разработки нового функционального блока снижается вдвое.

Кейс: UI-kit для крупного интернет-магазина из нашей практики

Клиент — ритейлер бытовой техники с каталогом 25 000 SKU. Команда: 4 фронтенд-разработчика. Проблема: за долгое время сайт разрабатывался разными командами, в CSS накопилось 8 вариантов кнопки, 3 реализации модальных окон (jQuery, Bootstrap, кастомная), 2 варианта нотификаций.

Первый этап — аудит: собрали все уникальные UI-элементы со всего сайта. Получили 47 типов элементов, которые нужно унифицировать. Второй этап — проектирование: совместно с дизайнером зафиксировали дизайн-систему (токены, 24 компонента, их варианты и состояния). Третий этап — разработка: написали библиотеку на Vue 3 с Composition API, включили UiButton, UiInput, UiModal, UiToast, UiPagination, UiDropdown, UiLoader и другие. Четвёртый этап — миграция: заменили старые реализации на компоненты kit, начиная с новых шаблонов и самых «грязных» старых.

Результат: скорость разработки выросла вдвое, дизайн-ревью сократился с 2 часов до 30 минут, все новые фичи сразу вписываются в единую дизайн-систему. Срок внедрения — 6 недель. Vue.js компоненты разрабатываются в 2 раза быстрее, чем аналоги на jQuery — разница в скорости особенно заметна на сложных кастомных элементах.

Как мы работаем: процесс и сроки

Полный цикл для базового UI-kit (15–20 компонентов) — 6–10 недель. Для крупного проекта с 30–50 компонентами и Storybook — 8–14 недель.

Гарантии и опыт

Мы разрабатываем на 1С-Битрикс и Vue.js более 10 лет. Сертифицированные специалисты, десятки успешных внедрений UI-kit для ритейла, сервисов и корпоративных порталов. Предоставляем гарантию на компоненты 6 месяцев. Закажите разработку UI-kit для вашего проекта — получите консультацию по срокам и стоимости. Свяжитесь с нами для оценки вашего проекта — мы подготовим предложение по разработке UI-kit под ключ.

Полезные ресурсы: Vue.js.