dva-cli 里使用

dva 脚手架为 ant design 提供的基于 redux、redux-saga 和 react-router 比较完善的轻量级前端框架，具体教程请查看。

如何使用 demo 地址请查看 dva-cli-example;

基本配置请查看 开始使用;

文件路径

dva-cli 脚手架的文件目录为 src/routes, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。

修改路由

复制完成后，我们需要将主页入口修改成以上复制的文件目录。

  1. import IndexPage from './routes/Home';

CSS Modules

dva 默认使用了 css-modules，同样我们提供了两套解决方案。

关闭 css-modules

如果你当前项目为新项目，且对 css-modules 并不是太了解，可以选择关闭 css-modules，只需要在 .roadhogrc 文件里加上 "disableCSSModules": true 即可。

  1. {
  2.   "entry": "src/index.js",
  3. +  "disableCSSModules": true, // 加在此处
  4.   "env": {
  5.     "development": {
  6.       "extraBabelPlugins": [
  7.         "dva-hmr",
  8.         "transform-runtime"
  9.       ]
  10.     },
  11.     "production": {
  12.       "extraBabelPlugins": [
  13.         "transform-runtime"
  14.       ]
  15.     }
  16.   },
  17. }

使用 global

使用 css-modules 的 global, 在 index.less 里添加 :global, 将样式不作转换, global 具体使用请查看开始使用。

按需加载

dva 里使用 babel-plugin-import 我们只需要 .roadhogrc 文件里添加 ["import", { "libraryName": "antd", "style": true }] 即可。

  1. {
  2.   "entry": "src/index.js",
  3.   "env": {
  4.     "development": {
  5.       "extraBabelPlugins": [
  6.         "dva-hmr",
  7.         "transform-runtime",
  8.         ["import", { "libraryName": "antd", "style": true }]
  9.       ]
  10.     },
  11.     "production": {
  12.       "extraBabelPlugins": [
  13.         "transform-runtime",
  14.         ["import", { "libraryName": "antd", "style": true }]
  15.       ]
  16.     }
  17.   },
  18. }

完成

完成以上频骤之后，我们再启动 npm start 即可查看在 landing 上下载的模板。