Подключение Alpine
Alpine подключают одним из двух способов: тегом <script> со ссылкой на CDN — сервер, раздающий готовые файлы библиотек, — или пакетом npm в проекте со сборщиком. Первый способ проще, второй удобнее, когда на сайте уже есть сборка JavaScript.
Через CDN
Создайте папку проекта и в ней файл index.html:
<!-- index.html -->
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Список дел</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<h1 x-data="{ title: 'Мои дела' }" x-text="title"></h1>
</body>
</html>Откройте файл в браузере — на странице появится заголовок «Мои дела». Его вывел Alpine из данных компонента.
Атрибут defer обязателен: он откладывает запуск скрипта, пока браузер не прочитает весь HTML. Тогда Alpine видит все элементы с x-data.
Запись alpinejs@3.x.x загружает последнюю версию третьей ветки. На рабочем сайте лучше указать точную версию, например alpinejs@3.14.9, чтобы обновление библиотеки не изменило поведение страницы неожиданно.
Через npm
Если проект собирается Vite, создайте его и установите пакет:
npm create vite@latest todo -- --template vanilla
cd todo
npm install alpinejsШаблон vanilla создаёт index.html в корне и файл src/main.js. Замените содержимое src/main.js:
// src/main.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();Импорт загружает библиотеку, а Alpine.start() запускает её: Alpine обходит страницу и оживляет директивы. Запись в window.Alpine не обязательна, но позволяет обращаться к Alpine из консоли браузера.
Добавьте в <body> файла index.html тот же заголовок и запустите сервер разработки:
npm run devСайт откроется по адресу http://localhost:5173.
Что выбрать
| Способ | Когда подходит |
|---|---|
| CDN | Статические страницы, шаблоны бэкенда, быстрые опыты |
| npm | В проекте уже есть Vite или другой сборщик, нужны плагины и свой код в модулях |
Во всех примерах курса используется CDN: так они работают прямо на странице урока.
Частая ошибка
Вызвать Alpine.start() дважды или подключить Alpine и через CDN, и через npm. Тогда каждый компонент запускается два раза: обработчики срабатывают дважды, а в консоли появляются предупреждения. Оставьте один способ подключения и один вызов Alpine.start().