Установка
Есть 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.9/dist/cdn.min.js"></script>Вот и всё! Alpine теперь доступен для использования на вашей странице.
Импорт в качестве модуля
Если вы предпочитаете более надёжный подход, можно установить Alpine через менеджер пакетов и импортировать его в пакет.
-
Запустите следующую команду для установки:
Окно терминала npm i alpinejsОкно терминала pnpm add alpinejsОкно терминала yarn add alpinejs -
Теперь импортируйте Alpine в свой пакет и инициализируйте его следующим образом:
import Alpine from 'alpinejs';window.Alpine = Alpine;Alpine.start();