本文目录基本概述Dva特征项目文件结构说明Dva概念图在Dva开发设计中，主程序和容器组件的路由挂接容器组件与功能组件的分离功能组件与模型的分离Model与基础操作的分离脚手架的安装和使用基本使用集成AntD
基本Dva特性框架性概述：这是一个完整的APP应用程序开发框架，而不是针对特定问题的插件，通过自动集成常见插件(如redux、router )并进行适当的集成配置，可以基于框架进行业务开发定义项目中各种文件的物理组织形式，定义各部件在项目中的逻辑合并方式，定义并简化数据和页面的访问和使用方式。 二次封装多个合并插件，直接使用本机插件
与create-react-app脚手架对比
插件使用界面项目结构说明mock[fold]:模拟数据文件存储路径src/assets[fold]:图像等，比默认更多常用插件更便于组织规范的项目文件格式组件ets [ fold ] :功能组件存储路径通常一个功能组件位于子文件夹中配置组件jsx、css和js文件src/models[fold]:数据模型文件src css和js文件src/service[fold]:数据模型调用的逻辑层方法存储路径，包括：容器组件的存储路径，通常一个容器组件在子文件夹中包含配置组件jsx，以及业务处理理论代码src/utils[fold]:通用刀具函数存储路径，例如src/index.css:主页样式文件src/indendex，如网络请求帮助类和字符串处理帮助类manifest.xml文件src/router.js :主页路由表roadhooor
注意事项
严格来说，功能组件和model没有逻辑上的一对一对应关系，结构上的集成/组合关系功能组件和model没有只有消息传递的通信关系，即， 功能组件位于主程序和容器组件路由挂钩主页面的html上，可以将页面数据和操作请求分发到指定的model功能组件，从指定的顶级model获取数据并进行UI展示dva开发设计“实质上是容器组件的条件加载”将容器组件和功能组件分开，使容器组件向上与路由表对应，实现页面切换；将容器组件向下与功能组件组合，实现功能的集成自身没有状态数据(state )，状态数据批量传递到redux空间的中间模型，一般管理容器组件，自身没有业务逻辑操作或交互侦听函数。 具体的业务逻辑操作被推迟到在功能组件中实现功能组件和Model的隔离功能组件，html元素结构和css样式等功能组件本身是各个子元素的响应事件，例如button-clickking 表单提交功能组件本身不包含状态数据(state )，状态数据统一传递给位于redux空间中间的models管理功能组件本身的侦听函数，不应具有业务逻辑性。只需要考虑将页面收集的参数（数据或操作指令）合理、合规、合时地传递给models功能组件必须负责在models中将相应的数据正确渲染到UI。 将models与基础操作分开的所有models都包含3358www.Sina.com/，而不应与组件直接相关的models包含应该受到redux统一管理命名空间(namespace ) 也就是说，当前model保存在redux空间中的变量名也是外部访问reducer， 在effect的限定models中为3358www.Sina .即当前models要管理操作的数据，由OOP的成员变量models的必须包含转发处理器(redels 功能组件发送的数据和操作指令models的3358www.Sina.com/包含副作用器)用于处理educer异步数据操作的models的应该侦听器(subscriptions ) 键盘输入等models的reducer、subscriptions一般只进行简单的state更新操作。 建议将复杂的业务逻辑方案推迟到在servivce上实现固定调用流程，然后推迟到在utils上在models上实现effect。 通常，仅执行基本异步操作和调用相应的reducer方法就将复杂的业务逻辑推迟到在相应的reducer内部实现固定调用流程，并建议在utils中通过脚手架安装和基本使用实现脚手架安装项目
确认npm install dva-cli -g //全球安装脚手架dva -v //当前dva版本号并创建空白项目
PSE :space _ webdvanew 11-hello-DVA//在指定路径下名为11-hello-dva的项目(文件夹格式)应该版本
a框架，在构建空白项目时，npm会报错说dva过时，建议改用umi框架。此问题可以忽略，继续构建 dva-cli is deprecated, please use create-umi instead, checkout https://umijs.org/guide/create-umi-app.html for detail.如果你是蚂蚁金服内部用户，请使用 bigfish 创建项目，详见 https://bigfish.alipay.com/ 。运行项目
npm start 调试过程中支持热更新，修改代码后不用重新启动项目调试插件不是webapppack，控制台显示，调试项目地址可能与传统react项目不同打包项目
nmp build 打包完成后会在项目文件中生成dist文件夹dist文件夹的网页内容必须在静态服务器中才可正常加载 集成AntD 安装antD 和 babel插件 npm install antd babel-plugin-import --save 配置集成：修改项目中的.webpackrc文件，修改结果如下 { "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ]}