@astrojs/ alpinejs

这个 Astro 集成 将 Alpine.js 添加到你的项目中，这样你就可以在页面的任何位置使用 Alpine.js。

安装

Astro 包含了一个 astro add 命令，用于自动设置官方集成。如果你愿意，可以改为手动安装集成。

要安装 @astrojs/alpinejs，请从项目目录中运行以下命令并按照提示进行操作：

npx astro add alpinejs

pnpm astro add alpinejs

yarn astro add alpinejs

如果遇到任何问题，请随时在 GitHub 上向我们报告，并尝试以下手动安装步骤。

手动安装

首先，安装 @astrojs/alpinejs 包。

npm install @astrojs/alpinejs

pnpm add @astrojs/alpinejs

yarn add @astrojs/alpinejs

大多数包管理器会自动安装相关的 peer 依赖项。然而，如果在启动 Astro 时看到 “Cannot find package ‘alpinejs’“（或者类似）的警告，则需要手动安装 Alpine.js：

npm install alpinejs @types/alpinejs

pnpm add alpinejs @types/alpinejs

yarn add alpinejs @types/alpinejs

然后，使用 integrations 属性将集成应用到你的 astro.config.* 文件中：

import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});

使用

安装集成后，你可以在任何 Astro 组件中使用 Alpine.js 的指令和语法。Alpine.js 脚本会自动添加，并且在网站的每个页面上应用。

请参阅我们的 Astro 集成文档了解更多信息。

限制

Alpine.js 集成不允许你控制脚本的加载或初始化方式。如果你需要这种控制，请考虑手动安装和使用 Alpine.js。Astro 支持所有官方文档中记录的 Alpine.js 手动设置说明，只需在 Astro 组件内部使用 <script> 标签即可。

当使用此组件时，目前暂时无法扩展 Alpine.js。如果你需要此功能，请考虑按照手动 Alpine.js 设置使用 Astro 脚本标签：

---
---

<!-- 示例：在单个页面上加载 AlpineJS。 -->
<script>
  import Alpine from 'alpinejs';

  // 可选：扩展 Alpine.js
  // Alpine.directive('foo', ...)

  window.Alpine = Alpine;
  Alpine.start();
</script>