许多国内的大厂都在拥抱 Facebook 开源的 React，蚂蚁金服、微信都在使用。我们公司为了长远的考虑，经过长期的学习和探索，决定使用蚂蚁金服开源的脚手架工具 Dva 进行前端的开发。
在使用 Dva 之前，需要学习的知识有 Webpack、ES6等知识。我个人喜欢用到啥再学啥，其他比如快捷键这种可以帮助我偷懒的技巧，我才会额外花时间去了解。这里有一份Dva官方的知识地图，按照这个知识地图学习，可以按图索骥，除去糟粕，汲取精华。
准备工作
安装好dva脚手架工具，使用命令
npm install -g dva-cli
检查安装成功与否：dva -v
创建新的项目
dva new dvaproject
Dva 会加载很多东西，这包含 src 在内的一些文件。
package.json 是依赖和组件库的配置文件，dva 兼容类似于 WeUI 的组件库，使用 npm install xxx --save 都会在这里注册,比如 "react": "^15.4.0"，表示 react 这个依赖，版本号是 15.4.0。
-
.roadhogrc 是入口文件，在配置按需加载功能的时候，需要在这里添加库的名称。比如以下代码：
"extraBabelPlugins": [ "transform-runtime", ["import", { "libraryName": "antd", "style": true }] ],请求数据的地址也在这个文件中配置，如下：
"proxy": { "/api": { "target": "http://localhost:8011/", "changeOrigin": true } }这会在 service 文件夹下的各个文件中用到，比较重要的地方在于 "/api" ,表示遇到 “/api” 的地方就用目标地址 "http://localhost:8011/"代替。比如使用 request 方法请求用户数据：
`request('/api/users', { method: 'POST', body: JSON.stringify(values), });`这时程序就会向http://localhost:8011/users发送post请求。
src文件夹下的文件是最关键的地方。
其中，
index.js:程序入口
router.js:路由的配置
utils：常用的工具性代码
services:请求、提交数据
routes：组件的入口
components:各个组件，
models：数据模型。
基本上，routes、components、models 这三个文件夹下的文件都是对应的，比如关于用户（users）的一个页面。其对应关系是：
users(routes)-users(component)-users(models)
使用命令 cd xxx 可以进入当前文件夹下的子文件夹 xxx 下。
cd dvaproject
npm install
npm start
三条命令后，浏览器会自动打开一个窗口显示主页面，如下图所示。
欢迎大家关注微信公众号：FrontEndVisDev
不仅有前端和可视化，还有我的创业经验
个人网站：http://kurryluo.github.io
各个分享平台的KurryLuo都是在下。
