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组件之后，效果如下：