跳转到内容

@astrojs/alpinejs

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

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

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

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

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

Terminal window
npm install @astrojs/alpinejs

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

Terminal window
npm install alpinejs @types/alpinejs

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

astro.config.mjs
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 脚本标签:

src/pages/index.astro
<!-- 示例:在单个页面上加载 AlpineJS。 -->
<script>
import Alpine from 'alpinejs';
// 可选:扩展 Alpine.js
// Alpine.directive('foo', ...)
window.Alpine = Alpine;
Alpine.start();
</script>

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

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

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

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

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

其他

UI 框架

SSR 适配器

其他