alpinejs/alpine

这是什么？

核心功能

• 01直接使用 HTML 属性声明状态与事件处理。
• 02既可通过 CDN script 标签引入，也可作为 npm 模块使用。
• 03提供展开折叠动画、焦点管理、输入格式化、状态持久化、DOM 智能替换等官方插件。
• 04提供符合 CSP 安全策略的构建版本。
• 05采用 monorepo 结构，包含 Cypress 与 Vitest 测试套件。

适用场景

• 在服务端渲染的页面中添加下拉菜单、弹窗或标签页，而无需完整的 SPA 框架。
• 在页面刷新后保留展开面板或表单数据等界面状态。
• 使用输入格式化和焦点管理构建交互式表单。
• 在要求严格 CSP 策略的环境中使用安全构建版本。

快速上手

1. 1

   在本地克隆仓库

2. 2

   安装依赖

   npm install
3. 3

   构建所有包

   npm run build
4. 4

   在页面的 script 标签中引入构建好的 cdn.js 文件

使用前须知

• !本仓库主要面向贡献者，大部分使用文档位于外部的 Alpine 文档站点。

标签

常见问题

alpine 是什么？

一个轻量精简的 JavaScript 框架，直接在 HTML 标记中添加响应式交互行为。 Alpine.js 是一个精简的 JavaScript 框架，用于在 HTML 中组合交互行为。开发者通过属性为元素绑定状态和事件处理，下拉菜单、弹窗、标签页、表单逻辑等小型交互可以直接写在对应的标记旁边，无需搭建复杂的应用结构。

alpine 可以免费使用吗？用的什么许可证？

alpine 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

alpine 还在维护吗？

活跃维护中。alpine 最近一次提交是在 2026年10月16日。

alpine 适合用来做什么？

在服务端渲染的页面中添加下拉菜单、弹窗或标签页，而无需完整的 SPA 框架。 在页面刷新后保留展开面板或表单数据等界面状态。 使用输入格式化和焦点管理构建交互式表单。 在要求严格 CSP 策略的环境中使用安全构建版本。

alpine 怎么安装和运行？

在本地克隆仓库 安装依赖: npm install 构建所有包: npm run build 在页面的 script 标签中引入构建好的 cdn.js 文件

在哪里获取 alpine？

源代码和安装说明在 GitHub 上：https://github.com/alpinejs/alpine