antd是按照规范设计出的一套组件库，蚂蚁金服、美团外面等热门app都在使用，dva是一个基于 react 和 redux 的轻量应用框架，我按照教程尝试创建一个应用，这里面的教程很棒，大家只要按照它的讲解一步步操作肯定会看到效果，我在这就不赘述教程内容了，我在学习过程中遇到了点问题，在这里总结一下，希望对大家有所帮助：

1、样式不见了

当我按照教程走完所有操作，我以为我看见的会是这样的：

但是没想到却是这样的：

原来，我编辑.roadhogrc文件，引入antd样式时忽略了env的环境变量，只在production中配置了样式，而我现在在开发模式下，development也应该配置上，.roadhogrc说明点这里

我项目中的配置文件：

修改完之后，自动刷新页面，样式有了

2、自定义样式不生效

我在routes目录新建css文件，用import引入，在页面中使用样式

按照以前的习惯，我在css中定义变量名包含中划线的类名，在前端用styles.xyy-aichifan使用的时候，控制台报错，原来jsx语法不能识别我带中划线的变量，改成下划线就好了。

之后我照猫画虎自己写了个route,component,model，然而我初始化在index.js里的state数据并没有生效，原来忽略了在index.js中添加这一行：app.model(require('./models/users'));

折腾一番之后，总结了使用dva开发前端项目要走的基本流程，如果要开发更复杂酷炫的应用，在这上面继续扩展。

1、在routes文件夹新建个路由，其实我一直觉得“路由”这个词很别扭，用“容器组件”更恰当一些。

2、在components文件夹定义UI组件，容器组件就是靠这些UI组件组合起来的。

3、在models文件夹定义model文件，model文件负责管理一个容器组件的模型，包含同步更新 state 的 reducers，处理异步逻辑（主要是ajax请求）的 effects。

4、最后，在容器组件中，把model和component串联起来，以antd官方的demo为例：

第1个products,connect后面的那个：表示models里products.js里的命名空间“products”

第2个products：表示的state里面的products

第3个products：表示容器组件的定义的products