首先簡單認識一下：官網(wǎng)地址：https://umijs.org/zh/guide/ umi，中文可發(fā)音為烏米，是一個可插拔的企業(yè)級 react 應用框架。umi 以路由為基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，并以此進行功能擴展，比如支持路由級的按需加載。然后配以完善的插件體系，覆蓋從源碼到構建產物的每個生命周期，支持各種功能擴展和業(yè)務需求，目前內外部加起來已有 50+ 的插件。
umi 是螞蟻金服的底層前端框架，已直接或間接地服務了 600+ 應用，包括 java、node、H5 無線、離線（Hybrid）應用、純前端 assets 應用、CMS 應用等。他已經很好地服務了我們的內部用戶，同時希望他也能服務好外部用戶。
使用umi搭建項目基本目錄結構如下：
├── dist/? ? ? ? ? ? ? ? ? ? ? ? ? // 默認的 build 輸出目錄
├── mock/? ? ? ? ? ? ? ? ? ? ? ? ? // mock 文件所在目錄，基于 express
├── config/
? ? ├── config.js? ? ? ? ? ? ? ? ? // umi 配置，同 .umirc.js，二選一
└── src/? ? ? ? ? ? ? ? ? ? ? ? ? // 源碼目錄，可選
? ? ├── layouts/index.js? ? ? ? ? // 全局布局
? ? ├── pages/? ? ? ? ? ? ? ? ? ? // 頁面目錄，里面的文件即路由
? ? ? ? ├── .umi/? ? ? ? ? ? ? ? ? // dev 臨時目錄，需添加到 .gitignore
? ? ? ? ├── .umi-production/? ? ? // build 臨時目錄，會自動刪除
? ? ? ? ├── document.ejs? ? ? ? ? // HTML 模板
? ? ? ? ├── 404.js? ? ? ? ? ? ? ? // 404 頁面
? ? ? ? ├── page1.js? ? ? ? ? ? ? // 頁面 1，任意命名，導出 react 組件
? ? ? ? ├── page1.test.js? ? ? ? ? // 用例文件，umi test 會匹配所有 .test.js 和 .e2e.js 結尾的文件
? ? ? ? └── page2.js? ? ? ? ? ? ? // 頁面 2，任意命名
? ? ├── global.css? ? ? ? ? ? ? ? // 約定的全局樣式文件，自動引入，也可以用 global.less
? ? ├── global.js? ? ? ? ? ? ? ? ? // 可以在這里加入 polyfill
? ? ├── app.js? ? ? ? ? ? ? ? ? ? // 運行時配置文件
├── .umirc.js? ? ? ? ? ? ? ? ? ? ? // umi 配置，同 config/config.js，二選一
├── .env? ? ? ? ? ? ? ? ? ? ? ? ? // 環(huán)境變量
└── package.json
使用步驟如下：
全局安裝環(huán)境
npm install -g umi
構建項目? & 創(chuàng)建src目錄
mkdir? project &&? cd project? &&? mkdir src &&? cd src
創(chuàng)建頁面／路由組件
umi g page index? //自動生成pages目錄，以及index.js index.css
運行項目
umi dev? ? //打開localhost:8000? 會看到index.js內的組件內容
構建生產環(huán)境
umi build
這些就是umi基本的頁面構建以及項目啟動。
pages中的js組件并列，文件名字便是路由路徑。
umi中可以通過導航標簽來進行路由切換
import Link from 'umi/link';<Link to="/list">list</Link>
路由傳參－3種形式（params，query，state）
state <Link to={{pathname:'/list',state:{id:'hello'}}}>list</Link>
query <Link to={{pathname:'/list',query:{id:'hello'}}}>list</Link>
params <Link to={'/list/111'}>list</Link>
接收參數(shù)
state {props.location.state.id}
query {props.location.query.id}
params
首先講list組件放在list目錄下，list.js更名為$id.js，id為保存params傳參的變量
使用? {props.match.params.id}
同時嵌套路由需要構建_layout.js。
需要展示子組件的容器通過 {props.children}
HTML模版定義－定義title，meta等設置，構建document.ejs
<!DOCTYPE html><html><head>? ? <meta charset="utf8" version='1'/>? ? <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！</title>? ? <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>? ? <meta name="description"? ? ? ? ? content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質商品.便捷、誠信的服務，為您提供愉悅的網(wǎng)上購物體驗!"/>? ? <meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東"/></head><body> <div id="root"></div></body></html>
全局公共css編寫－構建global.css? 無需引入，所有pages組件通用樣式。
