umijs react-wow 安装并使用 详细案例

`umijs` 是一个可插拔的企业级前端应用框架，基于 `React`，它提供了丰富的功能和约定，帮助开发者快速构建前端应用。`react-wow` 是一个用于 `React` 的动画库，可以方便地在 `React` 组件中添加动画效果。下面是 `umijs` 和 `react-wow` 安装并使用的一个详细案例：

1. 安装 umijs：
首先，你需要全局安装 `umi` 命令行工具。可以使用 `npm` 或 `yarn` 进行安装：

   npm install -g umi
   # 或者
   yarn global add umi

2. 创建一个新的 umi 项目：
使用 `umi` 命令创建一个新的项目，这里以创建一个 `react-wow` 示例项目为例：

   umi init my-react-wow-project

3. 进入项目目录，并安装依赖：

   cd my-react-wow-project
   npm install
   # 或者
   yarn

4. 安装 react-wow：
通过 `npm` 或 `yarn` 安装 `react-wow` 库：

   npm install react-wow --save
   # 或者
   yarn add react-wow

5. 在项目中使用 react-wow：
打开项目中的 `src/pages/index.js` 文件，假设我们要为页面标题添加淡入效果的动画，可以这样编写代码：

   import React from 'react';
   import { Page } from 'antd';
   import { Wow } from 'react-wow';

   function IndexPage() {
     return (
       <Page>
         <div className="content">
           <Wow animation="fade-in" duration="2000ms">
             <h1>欢迎使用 Umi + React-wow</h1>
           </Wow>
         </div>
       </Page>
     );
   }

   export default IndexPage;

在这个示例中，`<Wow>` 组件用于包裹需要应用动画效果的元素（这里是 `<h1>` 标签），`animation` 属性指定了动画名称（`fade-in`），`duration` 指定了动画持续时间。

6. 运行项目：
使用以下命令来启动开发服务器：

   npm start
   # 或者
   yarn start

打开浏览器访问 `http://localhost:8000`，你应该能看到带有淡入动画效果的页面标题。