安装
有两种方式可以将 Alpine 引入你的项目：
- 通过
<script>标签引入 - 作为模块导入
两种方式都完全有效，具体取决于项目需求和开发者偏好。
通过 script 标签
这是开始使用 Alpine 最简单的方式。在你的 HTML 页面的 head 中添加以下 <script> 标签。
<html>
<head>
...
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
...
</html>
不要忘记
<script>标签中的 "defer" 属性。
注意提供的 CDN 链接中的 @3.x.x。这将拉取 Alpine 版本 3 的最新版本。为了生产环境的稳定性，建议在 CDN 链接中固定最新版本。
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.15.12/dist/cdn.min.js"></script>
就是这样！Alpine 现在可以在你的页面中使用了。
请注意，你仍然需要使用 x-data 定义一个组件，Alpine.js 属性才能正常工作。详见 https://github.com/alpinejs/alpine/discussions/3805。
作为模块导入
如果你更喜欢更健壮的方式，可以通过 NPM 安装 Alpine 并将其导入到 bundle 中。
运行以下命令进行安装。
npm install alpinejs
然后将 Alpine 导入到你的 bundle 中并初始化：
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
window.Alpine = Alpine是可选的，但为了自由和灵活性（例如在开发者工具中使用 Alpine 时），建议加上。如果你将 Alpine 导入到了 bundle 中，必须确保在导入
Alpine全局对象和调用Alpine.start()初始化 Alpine 之间注册任何扩展代码。确保每个页面只调用一次
Alpine.start()。多次调用会导致多个 Alpine"实例"同时运行。