@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>

目前，Alpine.js 集成不支持任何自定义配置。

• Astro Alpine.js 示例 演示了如何在 Astro 项目中使用 Alpine.js。

如需帮助，请查看 Discord 上的 #support 频道。我们友好的支持团队成员会在这里提供帮助！

你还可以查阅我们的 Astro 集成文档 了解更多关于集成的信息。

该软件包由 Astro 核心团队维护。欢迎提交 issue 或 PR！

请参阅 CHANGELOG.md 了解此集成的更改历史。

更多集成