啟動(dòng)項(xiàng)目
yarn start / npm run start

在.env文件中可更改環(huán)境配置，一般不需要更改，常見(jiàn)更改例如

# 更改服務(wù)啟動(dòng)端口號(hào)
PORT=8001

# 關(guān)閉自動(dòng)打開(kāi)瀏覽器，默認(rèn)為打開(kāi)
BROWSER=none

詳細(xì)配置

編譯時(shí)的配置文件，.umirc.(js|ts) 和 config/config.(js|ts)，二者選一，不可共存
推薦在主文件夾下創(chuàng)建config文件，使用config.js進(jìn)行項(xiàng)目配置（刪除自動(dòng)搭建項(xiàng)目時(shí)創(chuàng)建的.umirc.(js|ts)）
詳細(xì)配置
config.local.js和config.production.js可在此配置開(kāi)發(fā)環(huán)境和線上環(huán)境不同的配置，在進(jìn)行打包時(shí)需修改package.json中腳本代碼

# 下載cross-env開(kāi)啟代碼分割功能
yarn add -D cross-env / npm install --save-dev cross-env 

# package.json中 "scripts"修改
"build": "cross-env UMI_ENV=production umi build"

根據(jù)實(shí)際情況進(jìn)行后綴添加，否則ts會(huì)報(bào)導(dǎo)入錯(cuò)誤

declare module "*.png";
declare module "*.jpg";
declare module "*.less";

修改tslint規(guī)則，可根據(jù)個(gè)人使用情況修改，詳細(xì)配置可見(jiàn)tslint-react相關(guān)約定規(guī)則

# 推薦修改
rules:
  eofline: true
  no-console: true
  no-construct: true
  no-debugger: true
  no-reference: true
  no-trailing-whitespace: false
  jsx-no-multiline-js: false
  jsx-alignment: false
  jsx-no-lambda: false

"experimentalDecorators": true

存放mock.js，默認(rèn)開(kāi)啟mock功能，可在.env文件中關(guān)閉： MOCK=none

所有與項(xiàng)目相關(guān)代碼存放在src文件之中

存放靜態(tài)資源，例如圖片文件、字體文件等

存放全局通用組件

全局布局，如果該文件夾下有index.(js|tsx)會(huì)在所有路由外面嵌套一層路由
例如之前路由為

[
  { path: "/", component: "./pages/index" },
  { path: "/users", component: "./pages/users" },
]

嵌套之后為

[
  { path: "/", component: "./layouts/index", routes: [
    { path: "/", component: "./pages/index" },
    { path: "/users", component: "./pages/users" },
  ] }
]

可在index文件中進(jìn)行全局布局，或者根據(jù)pathname修改不同路由下的布局

全局models,如果有一個(gè)以上的頁(yè)面會(huì)使用相同namespace空間內(nèi)的代碼，請(qǐng)將models文件放在此處，不然兩個(gè)頁(yè)面之間做交互時(shí)，
namespace中的代碼會(huì)產(chǎn)生影響

存放通用樣式，如果想覆蓋全局樣式可在global.(css|less|sass|scss)進(jìn)行修改，此文件不走 css modules，且會(huì)自動(dòng)被引入。
或者在app.(js|ts)中導(dǎo)入樣式文件

存放全局通用請(qǐng)求

存放通用方法

這是 umi dev 時(shí)生產(chǎn)的臨時(shí)目錄，默認(rèn)包含 umi.js 和 router.js，有些插件也會(huì)在這里生成一些其他臨時(shí)文件?？梢栽谶@里做一些驗(yàn)證，但請(qǐng)不要直接在這里修改代碼，umi 重啟或者 pages 下的文件修改都會(huì)重新生成這個(gè)文件夾下的文件。
該文件下的router.js可查看自動(dòng)生成的路由

項(xiàng)目頁(yè)面文件，在不同文件中創(chuàng)建的components、models、services文件最好只在該頁(yè)面中使用，可使項(xiàng)目結(jié)構(gòu)變得更加清晰

該文件為測(cè)試腳本文件，不會(huì)生成路由配置，如果需要使用mock測(cè)試，可以在外部mock文件中或者在該文件下創(chuàng)建__mock__文件

在 umi 項(xiàng)目中，你可以使用 dva 來(lái)處理數(shù)據(jù)流，以響應(yīng)一些復(fù)雜的交互操作。這些處理數(shù)據(jù)流的文件統(tǒng)一放在 models 文件夾下，每一個(gè)文件默認(rèn)導(dǎo)出一個(gè)對(duì)象，里面包含數(shù)據(jù)和處理數(shù)據(jù)的方法，通常我們稱之為 model 。一個(gè) model 文件的結(jié)構(gòu)一般是這樣的：

export default {
  namespace: "example", // 這個(gè) model 的名字，必須全局唯一,否則相同namespace的代碼會(huì)產(chǎn)生影響
  state: {
    count: 0,
  }, // 初始數(shù)據(jù)
  reducers: {
    save() { ... },
  }, // 用于修改數(shù)據(jù)
  effects: {
    *getData() { ... },
  }, // 用于獲取數(shù)據(jù)
  subscriptions: {
    setup() { ... },
  }, // 用于訂閱數(shù)據(jù)
}

每一個(gè) reducer 都是一個(gè)普通函數(shù)，接受 state 和 action 作為參數(shù)，即：(state, action) => state ，你可以在函數(shù)中更改舊的 state，返回新的 state 。

reducers: {
  save(state, { payload }) {
    return ({ ...state, ...payload });
  },
},

每一個(gè) effect 都是一個(gè) 生成器函數(shù) ，你可以在這里獲取你需要的數(shù)據(jù)，例如向服務(wù)器發(fā)起一個(gè)請(qǐng)求、或是獲取其他 model 里的 state 。為了明確分工，你無(wú)法在 effect 中直接修改 state ，但你可以通過(guò) put 方法 調(diào)用 reducer 來(lái)修改 state

state:{
  assets:{},
},
*changeAssets({ payload }, { call, put, select }) {
  const user = yield select(states => states.user);
  const assets = yield call(fetchData, user);
  yield put({ type: "save", payload: { assets } });
},

此方法用于獲取當(dāng)前或其他 model 的 state 。

const data = yield select(states => states[namespace]);

此方法用于執(zhí)行一個(gè)異步函數(shù)，可以理解為等待這個(gè)函數(shù)執(zhí)行結(jié)束。項(xiàng)目中常用于發(fā)送 http 請(qǐng)求，等待服務(wù)端響應(yīng)數(shù)據(jù)。

const data = yield call(doSomethingFunc, parameter);

此方法用于觸發(fā)一個(gè) action，這個(gè) action 既可以是一個(gè) reducer 也可以是一個(gè) effect 。

yield put({ type: "reducerName", payload: { page } });

subscription 用于訂閱一個(gè)數(shù)據(jù)源，根據(jù)需要使用 dispatch 觸發(fā)相應(yīng)的 action。數(shù)據(jù)源可以是當(dāng)前的時(shí)間、服務(wù)器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。 項(xiàng)目中常用于頁(yè)面初始化數(shù)據(jù)的自動(dòng)請(qǐng)求，如：

subscriptions: {
  setup({ dispatch, history }) {
    return history.listen(({ pathname, query }) => {
      // 進(jìn)入 "/home" 路由，發(fā)起一個(gè)名叫 "query" 的 effect
      if (pathname === "/home") {
        dispatch({ type: "query" });
      }
    });
  },
},

類似 effect 中的 put 方法，你可以在 subscription 的參數(shù)、或是一個(gè)已經(jīng) connect 過(guò)的組件的 props 中拿到。

通過(guò)此方法在你的組件中獲取到指定 model 的 state 數(shù)據(jù)。

import { connect } from "dva";
function App({ user, dispatch }) {
  const handleClick = () => {
    dispatch({ type: "user/fetchUser" });
  };
  return (
    

      
Hello, {user}
      Click me
    
  );
}
export default connect(({ user }) => ({ user }))(App);

如果使用es7的裝飾器則為

import { connect } from "dva";

@connect(({ user }) => ({ user }))
function App({ user, dispatch }) {
  const handleClick = () => {
    dispatch({ type: "user/fetchUser" });
  };
  return (
    

      
Hello, {user}
      Click me
    
  );
}
export default App;