# 引入方式

URL: https://caijiao.org/animejs/1-intro/2-import
Source: docs/animejs/1-intro/2-import.md
Description: 本节介绍如何将 Anime.js 应用到你的项目中，包括使用 CDN、NPM 安装以及与构建工具和框架集成的方法，帮助你根据项目需求选择最佳的引入方式。

使用 Anime.js 非常灵活，既可以在简单的 HTML 页面中通过 CDN 引入，也可以通过 NPM 安装并集成到现代前端框架中。

## 一、通过 CDN 引入

适合快速试验或小型项目：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
````

引入后，`anime` 对象可直接使用：

```js
anime({
  targets: 'div',
  translateX: 250
});
```

## 二、使用 NPM 安装

在现代项目中推荐使用：

```bash
npm install animejs
```

或使用 Yarn：

```bash
yarn add animejs
```

然后在 JavaScript 模块中导入：

```js
import anime from 'animejs/lib/anime.es.js';
```

## 三、在框架中使用

* **Vue/Vite**：可在组件内直接引入 `anime` 并使用；
* **React**：可在组件生命周期中控制动画（如 `useEffect`）；
* **VitePress/文档站点**：可通过 `<script>` 标签或异步组件加载。

## 小贴士

* CDN 更轻便，适合学习和演示；
* NPM 更适合可维护项目；
* 使用 Vite 等现代工具时，推荐使用 ESM 格式的模块路径（`anime.es.js`）。