许多国内的大厂都在拥抱 Facebook 开源的 React，蚂蚁金服、微信都在使用。我们公司为了长远的考虑，经过长期的学习和探索，决定使用蚂蚁金服开源的脚手架工具 Dva 进行前端的开发。

在使用 Dva 之前，需要学习的知识有 Webpack、ES6等知识。我个人喜欢用到啥再学啥，其他比如快捷键这种可以帮助我偷懒的技巧，我才会额外花时间去了解。这里有一份Dva官方的知识地图，按照这个知识地图学习，可以按图索骥，除去糟粕，汲取精华。

准备工作

安装好dva脚手架工具，使用命令

npm install -g dva-cli

检查安装成功与否：dva -v

创建新的项目

dva new dvaproject

Dva 会加载很多东西，这包含 src 在内的一些文件。

1.png

• 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文件夹下的文件是最关键的地方。

2.png

其中，
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

三条命令后，浏览器会自动打开一个窗口显示主页面，如下图所示。

3.png

欢迎大家关注微信公众号：FrontEndVisDev
不仅有前端和可视化，还有我的创业经验

个人网站：http://kurryluo.github.io
各个分享平台的KurryLuo都是在下。