@astrojs/alpinejs

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

安装

快速安装

astro add 命令行工具可以自动化安装。在新的终端窗口中运行以下命令之一（如果不确定你使用的是哪个包管理器，请运行第一个命令）。然后，按照提示，在终端中输入 “y”（表示 “yes”）确认每个提示。

# 使用 NPM
npx astro add alpinejs
# 使用 Yarn
yarn astro add alpinejs
# 使用 PNPM
pnpm astro add alpinejs

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

手动安装

首先，使用你喜欢的的包管理器安装 @astrojs/alpinejs 包。如果你使用的是 npm 或者不确定，可以在终端中运行以下命令：

npm install @astrojs/alpinejs

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

npm install alpinejs @types/alpinejs

然后，在 astro.config.* 文件中使用 integrations 属性应用此集成：

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>