HTMX - 安装

与其他 JavaScript 库相比，在项目中安装 HTMX 非常容易。HTMX 文件非常小，您可以将其保存在项目文件中，也可以使用 CDN 链接或任何其他更适合您需求或感觉更容易的选项。

下载 HTMX 的步骤

有很多方法可以使用 HTMX，下面列出了所有可能的方法及其说明。

通过 CDN 链接
下载副本
通过 npm 安装
通过 Webpack

通过 CDN 链接

这是在项目中使用 HTMX 最快最简单的方法。您只需要在 **<head>** 标签内包含以下链接。

压缩版本

<script src="https://unpkg.com/[email protected]" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>

未修改（原始）版本

<script src="https://unpkg.com/[email protected]/dist/htmx.js" integrity="sha384-yZq+5izaUBKcRgFbxgkRYwpHhHHCpp5nseXp0MEQ1A4MTWVMnqkmcuFez8x5qfxr" crossorigin="anonymous"></script>

下载副本

您可以从此链接 https://unpkg.com/[email protected]/dist/htmx.min.js 简单地保存文件，并将文件放置到您的项目目录中，然后通过 **<script>** 标签包含该文件。

<script src="/path/to/htmx.min.js"></script>

通过 npm 安装

您可以使用以下命令通过 npm 安装 HTMX。

npm install htmx.org

通过 Webpack

要通过 Webpack 使用 HTMX，您需要首先使用 npm 或 yarn 包管理器来安装它。

步骤 1：安装命令

npm install [email protected]
// Or
yarn install [email protected]

步骤 2：在您的 index.js 文件中导入
```
import 'htmx.org';
```
步骤 3：创建自定义 JavaScript 文件 (custom.js)
将此文件导入您的 index.js 文件。
```
import 'path/to/my_custom.js';
```
步骤 4：将以下代码添加到文件 (custom.js)
```
window.htmx = require('htmx.org');
```

现在您已准备好在项目中使用 HTMX 了。

HTMX 示例

在以下示例中，当用户点击“点击我！”按钮时，它将向 '/clicked' 发出一个 HTTP POST 请求，并使用响应中的内容替换 DOM 中 id 为 'parent' 的元素。

<button hx-post="/clicked"
 hx-trigger="click"
 hx-target="#parent"
 hx-swap="outerHTML"
>
 Click Me!
</button>

打印页面