umi+antd+dva项目搭建

记录项目搭建的大致流程，详细的可以查看 Ant Design 实战教程（beta 版），或者Umi文档及Dva文档

1. 项目初始化

全局安装umi

yarn global add umi

新建项目文件夹并cd进入

mkdir my-app
cd my-app

初始化package.json文件

yarn init -y

新建src文件

mkdir src

命令方式新建组件文件

umi generate pages index/index // 创建pages目录并在当前目录下新建index文件夹以及在index文件夹下新建index文件

generate： umi命令行工具

在package.json中添加启动脚本命令

// package.json
{
  "scripts": {
+   "start": "umi dev",
+   "build": "umi build"
  }
}

在终端输入 yarn start，就可以启动项目了

2. 使用antd

umi 3 之后 插件 “umi-plugin-react” 已不再适用， 而是改用 “@umijs/preset-react”

{
  "devDependencies": {
-   "umi-plugin-react": "^1"
+   "@umijs/preset-react": "^1"
  }
}

安装好 "@umijs/preset-react"和 “antd” 之后 需要在config配置文件中添加配置，首先在根目录下新建config文件夹，并新建config.js文件

yarn add @umijs/preset-react
yarn add antd

配置文件中也不是 umi 3 原先的写法

export default {
- plugins: [
-   ['umi-plugin-react', {
-     dva: {},
-     antd: {},
-     ...
-   }]
- ],
+ dva: {},
+ antd: {},
+ ...
}

升级到 Umi 3 ：升级到umi3
在页面组件中使用antd组件

// 引入
import { Card, Button } from 'antd';


// 使用
  <Card key={card.id}>
     <div>Q: {card.setup}</div>
      <div>
         <strong>A: {card.punchline}</strong>
      </div>
  </Card>

3. 使用dva做状态管理

安装dva

yarn add dva

配置文件中配置

export default {
+ dva: {},
+ antd: {},
+ ...
}

src目录下新建models文件夹并创建model.js文件

export default {
  namespace: 'puzzleCard',
  state: {
    data: [
      { id: 1,
        setup: 'Did you hear about the two silk worms in a race?',
        punchline: 'It ended in a tie',
      },
      {
        id: 2,
        setup: 'What happens to a frog\'s car when it breaks down?',
        punchline: 'It gets toad away',
      },
    ],
    counter: 100,
  }
}

将组件和model.js文件关联起来

import { connect } from 'dva';

const namespace = 'puzzleCard' // puzzleCard对应的是model.js文件里面的namespace

const mapStateToProps = (state) => {
  const cardList = state[namespace].data
  return {
    cardList
  }
}

export default connect(mapStateToProps)(Index)

点击触发dispatch处理
先在model.js文件中添加reducer处理

reducers: {
    addNewCard(state, { payload: newCard }) {
      const nextCounter = state.counter + 1;
      const newCardData = { ...newCard, id: nextCounter };
      const nextData = state.data.concat(newCardData)
      return {
        data: nextData,
        counter: nextCounter,
      }
    }
  }

在页面组件中添加点击触发事件

<Button onClick={() => props.onClickAdd({
          setup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
          punchline: 'here we use dva',
        })}> 添加卡片 </Button>

const mapDispatchToProps = (dispatch) => {
  return {
    onClickAdd: (newCard) => {
      const action = {
        type: `${namespace}/addNewCard`,
        payload: newCard
      }
      dispatch(action)
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)