react：react + dva + router + roadhog 基础项目搭建
一、脚手架安装
第一步：全局安装 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 基础项目搭建