使用dva脚手架创建antd-design开发环境 并处理跨越 （附 github 源码）

dva 是一个基于 React 和 Redux 的轻量应用框架，概念来自 elm，支持 side effects、热替换、动态加载、react-native、SSR 等

1. 安装 dva-cli

   $ npm install dva-cli -g
   $ dva -v
   0.8.2
   

2. 创建新应用

   $ dva new corsDemo
   

   这会创建 corsDemo 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

3. 运行项目

   $ npm start
   

浏览器出现dva的欢迎页面

使用 antd ：

通过 npm 安装 antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，

1. 引入antd

   cnpm install antd --save  
   

2. 引入按需加载插件

   cnpm install babel-plugin-import --save-dev 
   

3. 使插件生效： 编辑项目下的.roadhogrc文件中的extraBabelPlugins属性下添加

   {
     "entry": "src/index.js",
     "env": {
       "development": {
         "extraBabelPlugins": [
           "dva-hmr",
           "transform-runtime",
           ["import", { "libraryName": "antd", "style": "css" }]
         ]
       },
       "production": {
         "extraBabelPlugins": [
           "transform-runtime",
           ["import", { "libraryName": "antd", "style": "css" }]
         ]
       }
     }
   }
   

4. 启动

   npm start
   

浏览器出现dva的欢迎页面

注：dva-cli 基于 roadhog 实现 build 和 server，结束server,快捷键：Ctrl+C

修改 .roadhogrc 文件解决跨域问题

请求接口以：https://bond.jikeyun.net/index.php/interfaces/info/contact 为例

{
  "entry": "src/index.js",
  "proxy": {
    "/api": {
      "target": "https://bond.jikeyun.net/index.php/interfaces/",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
  },
  "env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    },
    "production": {
      "extraBabelPlugins": [
        "transform-runtime",
        ["import", { "libraryName": "antd", "style": "css" }]
      ]
    }
  }
}

跨域成功，浏览器结果为 :

github地址：https://github.com/wushuxuan/dva-reactjs-antd

使用步骤：

1. 下载项目压缩包到本地

2. 安装依赖

   npm install
   

输入npm run start , 浏览器输入 http://localhost:8000/#/admin/ 显示成功。