HTMX - 安装
与其他 JavaScript 库相比，为项目安装 HTMX 是一项相当简单的任务。HTMX 文件非常小，您可以将其保存在项目文件中，也可以使用 CDN 链接或任何其他更适合您的要求或对您来说更容易的选项。
下载 HTMX 的步骤
有很多方法可以使用 HTMX，下面提到并描述了所有可能的方法。
通过 CDN 链接
这是在您的项目中使用 HTMX 的最快和最简单的方法。您只需要在 <head> 标签内包含以下链接即可。
精简版本
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
未修改(原始)版本
<script src="https://unpkg.com/htmx.org@2.0.2/dist/htmx.js" integrity="sha384-yZq+5izaUBKcRgFbxgkRYwpHhHHCpp5nseXp0MEQ1A4MTWVMnqkmcuFez8x5qfxr" crossorigin="anonymous"></script>
下载副本
您可以简单地从此链接 https://unpkg.com/htmx.org@2.0.2/dist/htmx.min.js 保存文件，并将文件放在您的项目目录中，然后通过 <script> 标记包含该文件。
<script src="/path/to/htmx.min.js"></script>
通过 npm 安装
您可以使用以下命令通过 npm 安装 HTMX。
npm install htmx.org
通过 Webpack
要通过 Webpack 使用 HTML，您需要先使用 npm 或 yarn 包管理器进行安装。
- 步骤 1:安装命令
npm install htmx.org@2.0.2 // 或 yarn install htmx.org@2.0.2
- 步骤 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>
