从零开始的dva框架学习---1【项目搭建】

序言

首先简单介绍下dva的背景，dva是有阿里开发的轻量级框架，整合了react+react-router+redux+redux-saga+fetch，将使用react技术栈的开发过程进行优化，尤其是针对redux那块，后面使用model解决，这个放到后面再说。总而言之，在学习dva前如果你已经用过上述所说的react技术栈来进行开发，那么这个框架将给你带来非常愉快的体验，让我们开始进行dva的学习。

使用dva-cli脚手架快速搭建

(1). 确保你已经安装node环境，下载路径node下载（这里我安装的10.15.3稳定版），下载完成后使用$node -v查看版本
(2).全局安装dva-cli,命令如下

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

(3).构建项目

$ dva new dva-quickstart //dva-quickstart为你的项目名称

npm start 运行

ok,没啥毛病，看下代码结构

一般来说，我们首先会从package.json开始阅读代码

这里start命令使用roadhog server，那么roadhog是什么？这里不详细介绍，简单来说，roadhog 是可配置的 react-create-app。详情查看原作，roadhog配置文件文档查看链接 。

好了，我们看下入口文件做了什么
/src/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');

app为dva实例，这个没啥好说的，这里调用了app.router和app.start两个方法，app.router表明项目的主路由，与传统引入组件的方式相比更加清晰，app.start启动应用与ReactDOM.render()函数有异曲同工之处。

好了，本文就讲解到此，我会拆成章节来逐步编写，期待与诸君共同进步。