antd是按照規(guī)范設(shè)計(jì)出的一套組件庫，螞蟻金服、美團(tuán)外面等熱門app都在使用，dva是一個基于 react 和 redux 的輕量應(yīng)用框架，我按照教程嘗試創(chuàng)建一個應(yīng)用，這里面的教程很棒，大家只要按照它的講解一步步操作肯定會看到效果，我在這就不贅述教程內(nèi)容了，我在學(xué)習(xí)過程中遇到了點(diǎn)問題，在這里總結(jié)一下，希望對大家有所幫助：

1、樣式不見了

當(dāng)我按照教程走完所有操作，我以為我看見的會是這樣的：

但是沒想到卻是這樣的：

原來，我編輯.roadhogrc文件，引入antd樣式時忽略了env的環(huán)境變量，只在production中配置了樣式，而我現(xiàn)在在開發(fā)模式下，development也應(yīng)該配置上，.roadhogrc說明點(diǎn)這里

我項(xiàng)目中的配置文件：

修改完之后，自動刷新頁面，樣式有了

2、自定義樣式不生效

我在routes目錄新建css文件，用import引入，在頁面中使用樣式

按照以前的習(xí)慣，我在css中定義變量名包含中劃線的類名，在前端用styles.xyy-aichifan使用的時候，控制臺報(bào)錯，原來jsx語法不能識別我?guī)е袆澗€的變量，改成下劃線就好了。

之后我照貓畫虎自己寫了個route,component,model，然而我初始化在index.js里的state數(shù)據(jù)并沒有生效，原來忽略了在index.js中添加這一行：app.model(require('./models/users'));

折騰一番之后，總結(jié)了使用dva開發(fā)前端項(xiàng)目要走的基本流程，如果要開發(fā)更復(fù)雜酷炫的應(yīng)用，在這上面繼續(xù)擴(kuò)展。

1、在routes文件夾新建個路由，其實(shí)我一直覺得“路由”這個詞很別扭，用“容器組件”更恰當(dāng)一些。

2、在components文件夾定義UI組件，容器組件就是靠這些UI組件組合起來的。

3、在models文件夾定義model文件，model文件負(fù)責(zé)管理一個容器組件的模型，包含同步更新 state 的 reducers，處理異步邏輯（主要是ajax請求）的 effects。

4、最后，在容器組件中，把model和component串聯(lián)起來，以antd官方的demo為例：

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

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

第3個products：表示容器組件的定義的products