一、腳手架安裝
第一步：全局安裝 dva，這裏有個條件，node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x。
npm install dva-cli -g
第二步：查看版本號
dva -v
二、創建一個 dva 的 demo
dva new reactbase
cd myapp
npm start
本地生成的目錄結構如下：
注）如果 npm install 安裝報錯，改成 cnpm install
第一步：生成的目錄結構如下：
第二步：瞭解下 roadhog 的配置
鏈接地址：https://github.com/sorrycc/roadhog
三､配置 antd 、babel-plugin-import
babel-plugin-import 主要是用來引和 antd 的js 和 css 文件，打包出來的文件不會太大。
通過 npm 安裝 antd 和 babel-plugin-import。babel-plugin-import 是用來按需加載 antd 的腳本和樣式的，
cnpm install antd babel-plugin-import --save
四、安裝 react-router-dom
cnpm install react-router-dom --save-dev
五、在 .webpackrc 文件下配置：webpack 插件對 antd 按需加載
"extraBabelPlugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
],
六、在 .webpackrc 文件下繼續：配置代理
// 配置一下代理
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
最終 五 和 六 合成的代碼是：
七、項目構建
頁面運行（npm start）後的界面如下：
1､配置入口頁面：
默認：
修改後：
2､配置路由：./src/router.js
默認：
修改後：
3､添加主界面頁：新增 App.js
新增的文件可以理解爲：首頁
代碼如下：
效果圖如下：
4､ 添加組件：./src/components 下新增菜單組件，調用 antd 組件化。
默認的組件化格式如下：
修改成：
下面新建菜單文件：用 antd 的 Menu 菜單。
省略：參照官方文檔：https://ant.design/components/menu-cn/
在 App.js 中調用 Menus 組件
此時頁面效果如下：
注）佈局自行優化。可以用 Layout 佈局。
5､安裝 less 或者 sass
cnpm install less less-loader --save-dev
或
cnpm install sass sass-loader --save-dev
本項目中遇到一個問題：less 文件引入的時候第一種方法生效，第二種方法不生效（如下圖）？
原因是因爲 dva 中開啓了 css modules。antd 的樣式覆蓋了樣式。
解決方法如下：
:global {
// 寫據需樣式
}
6､路由配置
簡單來說就是點擊左側菜單，右邊內容改變。
方法一：
配置：App.js
配置：router.js
配置：Menu.js
方法二：
配置：index.js (入口文件）
配置：App.js
配置：router.js
7､效果出來了
六､ 模塊分析
初始化的 dva , 參考鏈接：https://www.jianshu.com/p/69f13e9123d9
1､const app = dva()
2､app.use
用來加載插件，reduce 第三方這種
3､app.model
用來接收發送的 action
4､app.router
在這裏面進行所有頁面初始化的路由設置
1､添加路由
2､添加 model
3､添加service
4､添加界面
參考鏈接：https://blog.whezh.com/dva-basic-usage/
https://www.cnblogs.com/Chasel-Chen/p/8984073.html
https://github.com/sorrycc/roadhog
框架搭建：
http://que01.github.io/2016/11/20/dva-react/
react + dva + router + roadhog 基礎項目搭建