我学 dva 那些事儿

今天正式入驻，准备开一个专题总结下最近的学习成果 —— dva。

dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架，在作者的 github 里是这么描述它的：“dva 是 react 和 redux 的最佳实践”。

antd-admin（推荐 x 1）

antd-admin 是基于 dva + antd 的一个后管系统，作者：zuiidea，项目：antd-admin，github 上也有 2000+ stats，有 dva 经验的可以看下，楼主当时也是边学习 dva 概念，边研究这个项目的。

这里面没有布局的概念，做到后面遇到一些坑。作者貌似因为 Ant Design Pro 的出现也不维护项目了。不建议以此学习了。

Ant Design Pro（推荐 x 5）

阿里自己整的一套开箱即用的中台前端/设计解决方案 Ant Design Pro github。初学者以这个入手，可以省很多事：框架搭建、布局、权限等等。点我在线预览效果、官方文档。

umi（中文名：五米，推荐 x 5）

同样是 dva 作者 sorrycc 最近整的新玩意，2018.2.26 发布的 1.0 版本。sorrycc 认为之前 dva 固然好，但还要用户自己引入 UI 工具 antd，打包工具 roadhog，路由 react-router，状态管理器 dva，这些很麻烦！前端发展越来越快，为什么不揉到一体呢！！

• 作者原文 Blog：Hello!umi，介绍了他为什么要整这个东东
• 快速上手，开发体验爽到不行
• umi github

antv（图表库，推荐 x 5）

与 Antd 风格相同，阿里自己研发的图表库。值得关注。

• Antv 官网
• Antv 图表用法，告诉你你的数据适合用什么图表进行展示

语雀（文档管理工具，推荐 x 5）

阿里最新开源的在线文档管理工具，风格挺小清新的，适合记笔记、写博客、团队文档交流等。语雀

先吐槽

学习的过程并非一帆风顺，遇到的一些问题对于非科班出身的我来说简直不可思议。

• 教程字典化

  • 现在的网络很发达，看似学习资料沧海星空，实则大多是一篇篇的字典，很难寻找到一篇用心编写的好教程。

  • 什么是字典化：复制的 API 文档。就像新华字典一样，我承认里面拥有所有的汉字，但是不知道查字典的方法抱着一本字典又有什么用呢？一个汉字一个汉字的去记忆会打击学习的兴趣。

  • 我理解的好教程 。花费80%的时间去跟你讲清楚这究竟是个什么东西——这就像查阅字典的方法。API 仅仅是“帮助文档”而已。

• 学会 dva 和学会在项目中使用 dva 是两码事

  • 学会使用 dva 开发一个增删改查的模块是很快的，我花费了三天。

  • 写完代码还需要提交，这就接触了此前没有使用过的 git 分布式版本控制工具。

  • 老板告诉我，你写的代码不能直接提交，要经过 ESLint 工具做代码审查之后才能放心的提交到版本库。

  • 提交到版本库只是开发环境时做的事情，考虑到将来上线还需要学习诸如 webpack 构建工具来进行项目打包。

  • .............

  • 项目中的 dva 远不止用到这些工具，还需要其它的一系列技术点才能组成一套完整的体系。

而我现在要做的事，就是将过程遇到的所有技术编写成一篇篇的好教程，便于需要它的人不会遇到我先前遇到的窘境。

为什么写这篇 Blog

起初，是由于项目的需要，开始正式接触 dva。

dva 的开发模式不同于传统页面的开发，学习起来有一定的技术门槛。

在 dva 的作者sorrycc Blog 里逗留了数个日夜，对新的开发模式好像是理解了，于是就迫不及待的下载了一个 demo，准备开发 CRUD。

故事情节的发展往往不会这么顺利，开发过程中发现，学会 dva 和在项目中使用 dva 进行完整开发完全是两码事：因为项目不仅仅是代码开发，还要关注项目的整体生命周期，代码规范，打包上线等等。

初学 dva 时心里变化

如果你和我一样，不能容忍在你的项目存在看不懂的东东，哪怕是一个配置文件，存在必有价值，不明白的东东就该 DELETE 掉，那么来到这里就对了，本文就是对 dva 做一次“大手术”，肢解它的技术组成，掌握项目中的 dva。

项目中的 dva

项目中的 dva

目录

• 初识 dva
  • dva 简介
  • 创建一个 dva 脚手架工程
  • dva 脚手架目录分析
  • 12 步 30 分钟，完成用户管理的 CURD 应用
• 语言基础
  • ES6
  • React
• 工具
  • 通俗易懂的 Npm 入门教程
  • 循序渐进的 Git 入门教程
  • 开发工具 Webstorm
  • 项目启动打包工具 Roadhog
  • 代码格式化工具 ESLint
  • es6 编译工具 Babel
  • 模拟后台提供接口工具 json-server
  • 制作假数据工具 Mock
  • 使用 Less 写样式
  • Iconfont 图标库使用
• 核心技术
  • react-router 4.0
  • redux
  • axios
  • antd
• dva 相关 Git 社区地址
  • dva
  • roadhog
  • ant-design
  • antd-admin
  • umi（五米）
  • ant-design-pro
• 推荐开源项目
  • React 全家桶
  • 12 步 30 分钟，完成用户管理的 CURD 应用
  • antd-admin 后台管理系统

dva README.md 之外的文档

dva 目前还没有自己的社区 dva 已经开放了官网：dva 官网地址，如果学习过程中遇到问题可以去 dva 的 github issue 库去寻找答案，目前已经 close 了 1160 个问题，也就是你遇到的问题大多前人都已遇到过。当然也有人不愿意或不熟悉 github 的，这里也记录一些作者遇到的坑的解决方法。

• dva 2.0 版本中如何使用 router 4.0
• dva 2.0中如何使用代码进行路由跳转
• dva 中使用 browserHistory 文档
• dva 处理页面加载过渡组件 dva-loading 使用文档
• dva 中使用自定义 iconfont 注意事项
• dva 更新2.0版本遇到问题汇总
• dva 中进行页面复用实践总结
• 解决 dva 注销退出系统后再点击登入，state 数据未清空的问题？
• dva 中使用 axios 统一拦截错误示例

备注

推广：好玩的书架网站

如果你有关于 dva 的问题，欢迎下方留言。

最后

打个广告，最近忽悠了个程序媛入行，她也在记录自己学习历程，希望看到这里的看官们可以去 她的主页 点个关注，给入门者一点小小的鼓励。