dva首先是基于redux和redux-saga的数据流解决方案，然后为了简化开发体验，dva还内置了react-router和fetch，所以它也可以理解为一个轻量级的海量应用框架。本教程是利用cnode的openapi做同一个网站，从而学习dva框架的使用。写的不好请见谅，一起学习。1.构建项目并安装dva-cli$npminstalldva-cli-g$dva-vdva-cliversion0.9.1创建一个新应用程序$dvanewcnode然后我们cd进入cnode目录并启动开发服务器：$cdcnode$npm启动几秒钟后，您应该会看到以下输出：编译成功！该应用程序运行在：http://localhost:8000/请注意，开发版本未优化。要创建生产构建，请使用npmrunbuild。这样我们的cnode应用就创建好了2.了解mock生成假数据的目录node_modules项目依赖的第三方库public单页模板文件相当于访问的第一页src开发目录src/assets静态资源文件src/components公共组件src/models各个业务处理的数据（状态）src/routes路由对应页面src/services业务逻辑处理utils工具3.修改首页现在我们需要替换欢迎页面，制作我们自己的布局打开routes/IndexPage.js修改代码importReactfrom'react';import{connect}from'dva';functionIndexPage(){return(

);}IndexPage.propTypes={};导出默认连接()(IndexPage);删除routes/IndexPage.css运行命令npmstart4。添加antdui库通过npm安装antd详见repo和babel-plugin-import。babel-plugin-import用于按需加载antd脚本和样式。详见repo$npminstallantdbabel-plugin-import--save编辑.webpackrc使babel-plugin-import插件生效。{"extraBabelPlugins":[["import",{"libraryName":"antd","libraryDirectory":"es","style":"css"}]]}5.使用antd创建头部公共组件在components下面创建Header.jsimportReactfrom'react';import{Menu,Icon,Input}from'antd';importPropTypesfrom'prop-types';constSearch=Input.Search;constHeader=({dispatch,keys})=>{functionhandleClick(e){console.log(e.key)}return();};Header.propTypes={keys:PropTypes.array.isRequired};exportdefaultHeader;在routes/IndexPage.js中使用公共组件importReactfrom'react';import{connect}from'dva';importHeaderfrom'../components/Header';functionIndexPage(){返回();}IndexPage.propTypes={};exportdefaultconnect()（索引页）；效果：下一节课跟我来。欢迎来到我的公众号mike，他什么都想做。回复react获取免费视频教程。