umi+dva開發環境及常用配置

安裝（官方文檔：https://umijs.org/zh）：

yarn global add umi

使用：

使用umi -v可查看版本，確保全局安裝沒問題

umi g page <文件名>
//創建包含目錄的頁面home/index.js home/index.css
umi g page home/index

//創建dva modle文件（如果項目是用yarn create umi創建的則無法使用該命令）
umi g dva:modle <文件名> //umi+dva的項目中可以不用在modle文件中指定namespace，默認取文件名 

通常情況下我們會使用yarn create umi來創建項目結構，在創建的時候會提示你做出一些關於項目的選擇：

確定後，會根據你的選擇自動創建好目錄和文件，然後yarn install安裝依賴。

常用配置：

更改主題色和自定義less全局變量，在.umirc文件中加入：

"theme": {
  "primary-color": "#1DA57A",//更改主題色
  "main_width": "1440px",//自定義全局樣式變量
},

啓用組件按需加載，在.umirc文件umi-plugin-react插件配置中加入dynamicImport配置（同樣基於react loadble插件實現的）：

dynamicImport: {
    webpackChunkName: true,//是否打包時將分割出來的文件命名讓其有意義
    loadingComponent: './components/Loading.js',//loading組件
    level: 2, //根據幾級路由做按需編譯，值越大按需編譯的越詳細，默認是會根據路由層級來動態判斷等級的，所以一般可以不指定
},

umi-plugin-react插件配置還可以配置dva的immer，讓其在reducer中不需要再return修改後state，而是可以直接修改即可生效：

dva: {
    immer: true,
    hmr: true
},

//在reducer中：
reducer:{//不啓用immer
    addCount(state, action){
        state.count += 1
        return state
    }
}

reducer:{//啓用immer
    addCount(state, action){
        state.count += 1
    }
}
//這只是簡單基本數據類型的改變實例，在某些情況下會讓你少寫更多代碼