dva项目创建过程图解及目录模块详解

一.项目创建

可以参考官方文档

1.安装 dva-cli

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。（“$符”代表你的文件路径，如：D:\Dvajs_workspace\）

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

2.创建新应用

dva版本符合要求之后，进入想要创建项目的文件夹下，打开命令行窗口(cmd)，运行以下指令

$ dva new dva-quickstart

dva-quickstart 为想要创建的dva项目名称

3.运行

进入项目，打开cmd窗口，运行指令

$ cd dva-quickstart
$ npm start

3.1运行时可能出现的问题以及解决办法

运行npm start时  若出现多个爆红ERO，则删除node_modules文件夹（依赖文件夹），然后执行以下指令

npm install

等待安装好依赖之后就行了。（若还是不行，建议百度，毕竟我就遇到过这一种，抱歉）

运行成功之后出现以下页面则说明运行成功

 二.项目目录及目录详解

1.项目目录及功能

2.初始文件具体功能

2.1 index.js

import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva();//项目初始化

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);//声明数据处理文件位置

// 4. Router
app.router(require('./router').default);//声明路由

// 5. Start
app.start('#root');//项目启动方式

2.2 router.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />{/*路由路径，路由配置文件 */}
      </Switch>
    </Router>
  );
}

export default RouterConfig;

2.3 utils/request.js

import fetch from 'dva/fetch';
//自动生成的请求工具函数，可以自定义
function parseJSON(response) {
  return response.json();
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }));
}

2.4 services/example.js

import request from '../utils/request';
//定义了一个services展示文件，只做请求示范，无具体用处
export function query() {
  return request('/api/users');
}

2.5 routes/IndexPage.js

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';
//定义路由，调用数据，展示信息
function IndexPage() {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
      </ul>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

2.6 models/example.js

//本身这个文件应该是定义数据，函数，进行数据处理的模块
//初始化项目中，在index.js中没有引用该文件，因此该文件目前无作用
export default {

  namespace: 'example',

  state: {},

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
      yield put({ type: 'save' });
    },
  },

  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },

};

2.7 components/Example.js

import React from 'react';
//定义了一个基础组件，该组件的唯一用途就是在一行显示“Example”字样
const Example = () => {
  return (
    <div>
      Example
    </div>
  );
};

Example.propTypes = {
};

export default Example;

在IndexPage底部调用Example组件之后，效果如下：