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)