Question

$ npm install dva-cli -g

# 创建应用
$ dva new dva-quickstart

# 启动
$ npm start

react 项目的推荐目录结构（如果使用 dva 脚手架创建，则自动生成如下）

|── /mock/             # 数据 mock 的接口文件  
|── /src/              # 项目源码目录（我们开发的主要工作区域）   
|   |── /components/   # 项目组件（用于路由组件内引用的可复用组件）   
|   |── /routes/       # 路由组件（页面维度） 
|   |  |── route1.js  
|   |  |── route2.js   # 根据 router.js 中的映射，在不同的 url 下，挂载不同的路由组件
|   |  └── route3.js    
|   |── /models/       # 数据模型（可以理解为 store，用于存储数据与方法）  
|   |  |── model1.js  
|   |  |── model2.js   # 选择分离为多个 model 模型，是根据业务实体进行划分
|   |  └── model3.js  
|   |── /services/     # 数据接口（处理前台页面的 ajax 请求，转发到后台）   
|   |── /utils/        # 工具函数（工具库，存储通用函数与配置参数）     
|   |── router.js       # 路由配置（定义路由与对应的路由组件）  
|   |── index.js       # 入口文件  
|   |── index.less      
|   └── index.html     
|── package.json       # 项目信息  
└── proxy.config.js    # 数据 mock 配置

使用 antd

npm i babel-plugin-import --save

babel-plugin-import 是用来按需加载 antd 的脚本和样式的

• 编辑 .webpackrc ，使 babel-plugin-import 插件生效

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}