資訊專欄INFORMATION COLUMN
摘要：或者在中導入樣式文件存放全局通用請求存放通用方法這是時生產的臨時目錄，默認包含和，有些插件也會在這里生成一些其他臨時文件。項目中常用于發送請求，等待服務端響應數據。如果使用的裝飾器則為
umi.js使用方法 node環境安裝
在官網下載與系統相應的node版本，node.js版本>=8.10
編輯器推薦使用Visual Studio Code 安裝方法
安裝uminpm install -g umi
推薦使用 yarn 代替 npm 來安裝 umi ， yarn 會針對部分場景做一些緩存以節省時間，你可以輸入以下命令來全局安裝 yarn，使用yarn后項目中盡量避免再使用npm，不然可能會發生意想不到的錯誤。
npm install -g yarn # 安裝完成后，使用命令查看是否安裝成功 yarn -v # 使用yarn安裝umi yarn global add umi # 安裝完成后，使用命令查看是否安裝成功 umi -vumi快速搭建項目
創建項目文件后使用終端工具打開文件
推薦使用 yarn create 命令，能確保每次使用最新的腳手架。
yarn create umi / npm create umi
如果提示 create-umi 命令不存在，你需要執行 yarn global bin，然后把 global bin 的路徑添加到環境變量 PATH 中。選擇 project,選擇app項目回車鍵確認
? Select the boilerplate type (Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. ? app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.選擇是否使用 TypeScript,推薦使用TypeScript，輸入y后回車結束
? Do you want to use typescript? (y/N)選擇你需要的功能
功能介紹詳見 plugin/umi-plugin-react
? What functionality do you want to enable? (Press項目創建完成to select, to toggle all, to invert selection) ?? antd ? dva ? code splitting ? dll
啟動項目 yarn start / npm run start環境配置
在.env文件中可更改環境配置，一般不需要更改，常見更改例如
# 更改服務啟動端口號 PORT=8001 # 關閉自動打開瀏覽器，默認為打開 BROWSER=none
詳細配置
config配置編譯時的配置文件，.umirc.(js|ts) 和 config/config.(js|ts)，二者選一，不可共存
推薦在主文件夾下創建config文件，使用config.js進行項目配置（刪除自動搭建項目時創建的.umirc.(js|ts)）
詳細配置
config.local.js和config.production.js可在此配置開發環境和線上環境不同的配置，在進行打包時需修改package.json中腳本代碼
# 下載cross-env開啟代碼分割功能 yarn add -D cross-env / npm install --save-dev cross-env # package.json中 "scripts"修改 "build": "cross-env UMI_ENV=production umi build"typings.d.ts配置(使用typescript)
根據實際情況進行后綴添加，否則ts會報導入錯誤
declare module "*.png"; declare module "*.jpg"; declare module "*.less";tslint.yml配置(使用typescript)
修改tslint規則，可根據個人使用情況修改，詳細配置可見tslint-react相關約定規則
# 推薦修改 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(js|ts)config.json開啟ES7裝飾器功能
"experimentalDecorators": true文件詳解 mock文件
存放mock.js，默認開啟mock功能，可在.env文件中關閉： MOCK=none
src所有與項目相關代碼存放在src文件之中
src/assets存放靜態資源，例如圖片文件、字體文件等
src/components存放全局通用組件
src/layouts全局布局，如果該文件夾下有index.(js|tsx)會在所有路由外面嵌套一層路由
例如之前路由為
[
{ path: "/", component: "./pages/index" },
{ path: "/users", component: "./pages/users" },
]
嵌套之后為
[
{ path: "/", component: "./layouts/index", routes: [
{ path: "/", component: "./pages/index" },
{ path: "/users", component: "./pages/users" },
] }
]
可在index文件中進行全局布局，或者根據pathname修改不同路由下的布局
src/models全局models,如果有一個以上的頁面會使用相同namespace空間內的代碼，請將models文件放在此處，不然兩個頁面之間做交互時，
namespace中的代碼會產生影響
存放通用樣式，如果想覆蓋全局樣式可在global.(css|less|sass|scss)進行修改，此文件不走 css modules，且會自動被引入。
或者在app.(js|ts)中導入樣式文件
存放全局通用請求
src/utils存放通用方法
src/pages/.umi這是 umi dev 時生產的臨時目錄，默認包含 umi.js 和 router.js，有些插件也會在這里生成一些其他臨時文件。可以在這里做一些驗證，但請不要直接在這里修改代碼，umi 重啟或者 pages 下的文件修改都會重新生成這個文件夾下的文件。
該文件下的router.js可查看自動生成的路由
項目頁面文件，在不同文件中創建的components、models、services文件最好只在該頁面中使用，可使項目結構變得更加清晰
tests該文件為測試腳本文件，不會生成路由配置，如果需要使用mock測試，可以在外部mock文件中或者在該文件下創建__mock__文件
Dva.js使用需掌握的知識點 Model在 umi 項目中，你可以使用 dva 來處理數據流，以響應一些復雜的交互操作。這些處理數據流的文件統一放在 models 文件夾下，每一個文件默認導出一個對象，里面包含數據和處理數據的方法，通常我們稱之為 model 。一個 model 文件的結構一般是這樣的：
export default {
namespace: "example", // 這個 model 的名字，必須全局唯一,否則相同namespace的代碼會產生影響
state: {
count: 0,
}, // 初始數據
reducers: {
save() { ... },
}, // 用于修改數據
effects: {
*getData() { ... },
}, // 用于獲取數據
subscriptions: {
setup() { ... },
}, // 用于訂閱數據
}
Reducer
每一個 reducer 都是一個普通函數，接受 state 和 action 作為參數，即：(state, action) => state ，你可以在函數中更改舊的 state，返回新的 state 。
reducers: {
save(state, { payload }) {
return ({ ...state, ...payload });
},
},
Effect
每一個 effect 都是一個 生成器函數 ，你可以在這里獲取你需要的數據，例如向服務器發起一個請求、或是獲取其他 model 里的 state 。為了明確分工，你無法在 effect 中直接修改 state ，但你可以通過 put 方法 調用 reducer 來修改 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 } });
},
select
此方法用于獲取當前或其他 model 的 state 。
const data = yield select(states => states[namespace]);call
此方法用于執行一個異步函數，可以理解為等待這個函數執行結束。項目中常用于發送 http 請求，等待服務端響應數據。
const data = yield call(doSomethingFunc, parameter);put
此方法用于觸發一個 action，這個 action 既可以是一個 reducer 也可以是一個 effect 。
yield put({ type: "reducerName", payload: { page } });
Subscription
subscription 用于訂閱一個數據源，根據需要使用 dispatch 觸發相應的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。 項目中常用于頁面初始化數據的自動請求，如：
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {
// 進入 "/home" 路由，發起一個名叫 "query" 的 effect
if (pathname === "/home") {
dispatch({ type: "query" });
}
});
},
},
dispatch
類似 effect 中的 put 方法，你可以在 subscription 的參數、或是一個已經 connect 過的組件的 props 中拿到。
connect通過此方法在你的組件中獲取到指定 model 的 state 數據。
import { connect } from "dva";
function App({ user, dispatch }) {
const handleClick = () => {
dispatch({ type: "user/fetchUser" });
};
return (
Hello, {user}
);
}
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}
);
}
export default App;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/103545.html
摘要：，中文可發音為烏米，是一個可插拔的企業級應用框架。以路由為基礎的，支持類的約定式路由，以及各種進階的路由功能，并以此進行功能擴展，比如支持路由級的按需加載。全局存于目錄，所有頁面都可引用頁面不能被其他頁面所引用。 umi，中文可發音為烏米，是一個可插拔的企業級 react 應用框架。umi 以路由為基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，并以此進行功能擴展...
摘要：適配路由問題絕對能用的一篇配置，文末直接有文件，伸手黨直接拿走本文環境比較復雜，首先兩層轉發，并且訪問路徑也不是根路徑。不對做編碼，因此請求為，可以被規則匹配到注意是空格。配置錯誤解決優先級問題后，問題依然存在。導致找不到請求。 nginx 適配react-routerbrowserRoute 路由問題 絕對能用的一篇nginx配置，文末直接有文件，伸手黨直接拿走 本文環境比較復雜，首...
摘要：因為通常把不使用修飾的成員變量和方法也稱為實例變量實例方法。形參個數可變的方法允許定義形參個數可變的參數，從而允許為方法指定數量不確定的形參。方法返回值類型修飾符等，與方法重載沒有任何關系。 類和對象 定義類 面向對象的程序設計過程中有兩個重要概念：類（class）和對象（object，也被稱為實例，instance），其中類是某一批對象的抽象，可以把類理解成某種概念；對象才是一個具體...
摘要：對象的引用關鍵字總是指向調用該方法的對象。根據出現位置的不同，作為對象的默認引用有兩種情形。構造器中引用該構造器正在初始化的對象。如果同一個類中包含了兩個或兩個以上方法的方法名相同，但形參列表不同，則被稱為方法重載。 類和對象 定義類 面向對象的程序設計過程中有兩個重要概念：類（class）和對象（object，也被稱為實例，instance），其中類是某一批對象的抽象，可以把類理解成...
閱讀 2457·2021-11-24 10:18
閱讀 2989·2021-11-19 09:59
閱讀 1865·2019-08-30 15:53
閱讀 1323·2019-08-30 15:53
閱讀 1196·2019-08-30 14:19
閱讀 2681·2019-08-30 13:14
閱讀 3186·2019-08-30 13:00
閱讀 2273·2019-08-30 11:11
