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].datareturn {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)

umi+antd+dva项目搭建相关推荐

Umi + AntD Pro 项目搭建
一.Umi 介绍 umi 是可扩展的企业级前端应用框架,Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展. create-react-app 对比: cr ...
react + antd pro 项目搭建及发布流程
#antd Pro 项目环境搭建 ##一.搭建项目参考网址:https://pro.ant.design/docs/deploy-cn ###1.安装从 GitHub 仓库中直接安装最新的脚手架代 ...
umi+dva+antd项目搭建
umi+dva+antd 项目搭建说明设计特点创建应用目录注意特点约定式路由嵌套路由 Scroll to top 页面间跳转配置config/config.js(或.umirc.js) ...
dva 打包多个html,使用dva+umi+antd构建页面（一）
使用dva+umi+antd构建页面首先确保安装npm或者yarnhtml 建立新应用首先建立应用目录node mkdir myapp && cd myapp 推荐使用 yarn ...
dva使用及项目搭建
一.简介本文将简单分析dva脚手架的使用及项目搭建过程. 首先,dva是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fet ...
react：react + dva + router + roadhog 基础项目搭建
一.脚手架安装第一步:全局安装 dva,这里有个条件,node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x. npm install dva-cli -g 第二步:查看版本号 ...
创建Dva项目的方法(dva-cli,umi)
一共有俩种方式创建DvaJS项目,一种是通过dva-cli创建,另一种是通过umi. 通过dva-cli创建项目先安装dva-cli. $ npm install dva-cli -g 然后创建项目 ...
react、umi、dva
React 一.React的简介 1.介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). Rea ...
视频教程-19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频-ReactJS
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/j ...

umi+antd+dva项目搭建

1. 项目初始化

2. 使用antd

3. 使用dva做状态管理

umi+antd+dva项目搭建相关推荐

最新文章

热门文章