浅谈react Dva

浅谈react Dva

官网地址：Dva官网链接
一、快速上手
（1）安装 dva-cli
通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

$ npm install dva-cli -g 全局安装dva-cli
$ dva -v  检验版本在0.9.1版本以上

（2）创建新应用

$ dva new dvaDemo   创建项目文件夹

（3）cd进入文件夹，启动项目

$ cd dvaDemo   
$ npm start

在浏览器里你会看到 dva 的欢迎界面。

二、文件目录介绍

（1）mock：模拟数据的文件
（2）node_modules：项目依赖文件
（3）public：静态页面
（4）src：整个项目主要文件所在

• src文件—>assets：放静态文件的
  component ：项目中通用组件存放文件
  models:放数据的文件
  router：首页显示的页面
  services:请求文件
  utiles:工具库文件
  index.js:dva项目的入口文件
  router.js:指定路由的

三、dva是单页面应用，虽然有不同的路由页面，但是变化的都是js文件
1.src/index.js中的app.router
如下图index.js中的app.router(require(’./router’).default);引用了同目录下src下的router.js文件，这里的require类似于import,这里也可以改成:顶部导入 import RouterConfig from “./router”
（这里的RouterConfig 是router.js中导出的 export default RouterConfig;）
app.router(RouterConfig); //原来的app.router改成这个
2.dva默认是hashRouter 对浏览器不太好
去掉路径中的#方式如下：
1） 终端中安装：npm install --save history
2） 在入口的src/ index.js中 导入
import {createBrowserHistory as createHistory} from “history”
3） 修改dva初始化内容 src/index.js中
const app =dva({history:createHistory()});
这样就把#去掉了，可以通过 ‘localhost:8001/ ’ 就可以访问根页面了。

3.src/router.js


说明：exact 加了这个，在访问其他路由页面时，exact修饰组件（包含这个路径的）的会消失，不然后面访问的组件是在这个后面添加。如上所示加了exact,访问…/user 路径时就不会访问到 “/” 的IndexPage组件了。