使用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/ 顯示成功。