DVA介绍
1.名称由来
D.Va拥有一部强大的机甲,它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵
___来自守望先锋
2.DVA是什么?
DVA是一个轻量级的应用框架
3.开发团队
支付宝开发团队
DVA应用创建
$ npm install dva-cli -g
$ dva new app
$ cd app
$ yarn start
$ dva new app
$ cd app
$ yarn start
4. DVA项目内容介绍
- 目录介绍
├── mock mock模拟数据
├── node_modules 所有的依赖安装的目录
├── editorconfig 项目编辑器配置记录文件
├── eslintrc eslint代码检测配置文件
├── .gitignore git上传忽略性配置文件
├── .webpackrc webpack配置文件
├── package.json 项目依赖配置记录文件 、 记录项目脚本命令
├── public 静态公共目录( 生产环境 ) 不会被webpack编译
└── src 开发用的源代码目录
└──── index.js 项目入口文件
└──── index.css 项目全局样式
└──── router.js 项目路由配置
└──── App.css 是App组件的样式文件
└──── App.test.js 是App组件测试文件
└──── logo.svg 初始项目的界面logo
└──── serverWorker 内部文件,我们不操作
└──── assets 开发环境下的静态资源文件夹,会被 wepback 编译
└──── components 组件存放目录
└──── model redux
└──── services 数据请求
└──────── example.js exmaple组件中的数据请求
└──── routes 路由对应的组件
└──────── index.js 项目默认页面
└──── utils 项目封装库
└─────── request.js 封装fetch数据请求
</div>
- 项目解读
- 先查看 package.json 文件,通过npm脚本来确定项目启动命令 - 通过roadhog来启动项目
- 在查看项目入口文件 src/index.js
- 确定了redux引入的形式
- 确定了路由的引用
- 查看路由的配置 router.js
- 查看路由配置对应渲染的组件
- 查看状态共享的redux如何使用