Установка и подключение

Минимальные требования и подготовка среды

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

Установка через CDN

Самый быстрый способ подключения основан на загрузке модуля напрямую:

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({ count: 0 }).mount()
</script>

Ключевым моментом выступает использование type="module", позволяющего браузеру корректно обрабатывать импорт. Библиотека не требует дополнительных зависимостей и может быть встроена в страницу локально, без предварительной сборки.

Подключение без модулей

Для сред, не предполагающих работу с import, Petite-Vue доступна в виде автономного скрипта:

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp({ count: 0 }).mount()
</script>

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

Установка через npm

В проектах со сборкой предпочтительнее установка через npm:

npm install petite-vue

После установки модуль импортируется в приложение:

import { createApp } from 'petite-vue'
createApp({...}).mount()

Сборщик (Vite, Webpack, Rollup и другие) выполняет оптимизацию и позволяет использовать дополнительные возможности экосистемы, включая горячую перезагрузку и проверку типов в редакторе.

Особенности прогрессивного подключения

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

Распространённые сценарии установки

  1. Быстрое прототипирование Используется CDN-вариант, позволяющий экспериментировать в изолированных HTML-файлах без подготовки окружения.

  2. Встраивание в существующий сайт Применяется сценарий без модулей: Petite-Vue добавляется поверх статической страницы, обеспечивая реактивность отдельных фрагментов интерфейса.

  3. Интеграция в сборку фронтенда npm-установка, подходящая для масштабируемых проектов, где Petite-Vue выступает лёгким дополнением к уже существующему коду.

Выбор способа подключения

Выбор зависит от степени контроля над окружением и требований проекта. CDN обеспечивает минимальный порог входа, npm — более гибкую интеграцию. Подключение без модулей помогает плавно добавлять реактивное поведение в старые системы.

Размер и производительность

Объём библиотеки составляет считанные килобайты, что позволяет не ухудшать показатели скорости загрузки страницы. Petite-Vue загружается быстро и может применяться даже на мобильных устройствах с ограниченными ресурсами.

Поддержка SSR и совместимость

Petite-Vue ориентируется на клиентский рендеринг и не требует серверной подготовки данных. Библиотека не конфликтует с другими инструментами, что позволяет внедрять её контекстно, совместно с jQuery, Stimulus, Alpine или независимым DOM-кодом.

Итоговое состояние подключения

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

Оглавление