一、简介
本文将简单分析dva脚手架的使用及项目搭建过程。
首先，dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。
二、特性
易用易学、elm概念、插件机制、支持HMR。
三、环境搭建
1、首先安装dva-cli
npm install dva-cli -g
2、初始化项目
dva new dva-quickstart cd dva-quickstart npm start
3、引入antd
通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的.
npm install antd babel-plugin-import --save
4、按需加载，找到根目录下面的.webpackrc文件，并在文件中添加插件配置。
"extraBabelPlugins": [ ["import", { "libraryName": "antd", "style": "css" }] ]
5、试引入ant 组件button
import React from 'react'; import { connect } from 'dva'; import styles from './IndexPage.css'; import { Button } from 'antd'function IndexPage() { return ( <div className={styles.normal}> <h1 className={styles.title}>Yay! Welcome to dva!</h1> <Button type="primary">primary</Button> <div className={styles.welcome} /> <ul className={styles.list}> <li>Getting Started</li> </ul> </div> ); } IndexPage.propTypes = { }; export default connect()(IndexPage);
四、项目目录结构介绍
1、目录结构
assets目录：一般作为静态文件存储目录，比如图片或者css;
components：组件目录；
models：应用逻辑层，可存放公共的数据以及逻辑，类似于vuex；
pages（routes）：页面路由存放文件夹；
services：页面API请求数据；
utils：公共方法的封装；
index.js：入口文件；
router.js：路由文件
2、具体文件介绍
2.1、index.js 入口文件
import dva from 'dva'; import './index.css'; // 1. Initializeconst app = dva(); // 2. Plugins // app.use({});// 3. Modelapp.model(require('./models/example').default); app.model(requ
