项目实战

dva 是一个基于 react 和 redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等，已在生产环境广泛应用。

本文会引导你使用 dva 和 antd 从 0 开始创建一个简单应用。 会包含以下内容：

安装 dva-cli

通过 npm 安装 dva-cli 并确保版本是 0.7.0 或以上。 
  1. $ npm install dva-cli -g
  2. $ dva -v
  3. 0.7.0

创建新应用

安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（不能访问？）。现在，你可以通过 dva new 创建新应用。 
  1. $ dva new dva-quickstart
这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。 然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器： 
  1. $ cd dva-quickstart
  2. $ npm start
几秒钟后，你会看到以下输出： 
  1. Compiled successfully!
  3. The app is running at:
  5.   http://localhost:8000/
  7. Note that the development build is not optimized.
  8. To create a production build, use npm run build.
在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。

使用 antd-mobile

见此使用示例

注意：.babelrc文件失效，相应配置转移到.roadhogrc文件中，参考文档## 接下来：#-定义路由-编写 UI Component-定义 Model请参考 dva examples## 构建应用#完成开发并且在开发环境验证之后，就需要部署给我们的用户了。先执行下面的命令： 
  1. $ npm run build

build 命令会打包所有的资源，包含 JavaScript, CSS, images, html 等。然后你可以在 dist/ 目录下找到这些文件。

下一步

我们已经完成了一个简单应用，你可能还有很多疑问，比如：

  • 如何处理异步请求

  • 如何优雅地加载初始数据

  • 如何统一处理出错，以及特定操作的出错

  • 如何动态加载路由和 Model，以加速页面载入速度

  • 如何实现 hmr

  • 如何 mock 数据

  • 等等

你可以：