Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

Установка

Есть 2 способа включить Alpine в ваш проект:

  • Подключение через тег <script>
  • Импорт в качестве модуля

Оба способа одинаково удобны. Всё зависит от потребностей проекта и вкуса разработчика.

Подключение через тег <script>

Это самый простой способ начать работу с Alpine. Включите следующий тег <script> в заголовок вашей HTML-страницы.

<html>
  <head>
    ...
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
  </head>
  ...
</html>

Для стабильности работы рекомендуется указать последнюю версию скрипта в ссылке CDN:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.4/dist/cdn.min.js"></script>

Вот и всё! Alpine теперь доступен для использования на вашей странице.

Импорт в качестве модуля

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

  1. Запустите следующую команду, чтобы установить его.

    Окно терминала
    npm i alpinejs

  2. Теперь импортируйте Alpine в свой пакет и инициализируйте его следующим образом:

    import Alpine from 'alpinejs';
    

    window.Alpine = Alpine;
    

    Alpine.start();
Подробнее о расширении Alpine