umi，中文可發音爲烏米，是一個可插拔的企業級 react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，並以此進行功能擴展，比如支持路由級的按需加載。然後配以完善的插件體系，覆蓋從源碼到構建產物的每個生命週期，支持各種功能擴展和業務需求，目前內外部加起來已有 50+ 的插件
1.Why umi
- 開箱即用，內置 react、react-router 等
- 類 next.js 且功能完備的路由約定，同時支持配置的路由方式
- 完善的插件體系，覆蓋從源碼到構建產物的每個生命週期
- 一鍵兼容到 IE9
- 完善的 TypeScript 支持
- 與 dva 數據流的深入融合
2.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
├── .umirc.js // umi 配置，同 config/config.js，二選一
├── .env // 環境變量
└── package.json3.約定式路由
啓動 umi dev 後，大家會發現 pages 下多了個 .umi 的目錄請不要直接在這裏修改代碼，umi 重啓或者 pages 下的文件修改都會重新生成這個文件夾下的文件，約定 pages 下所有的 (j|t)sx? 文件即路由
1.基礎路由
//假設 pages 目錄結構如下：
1. pages/
2. users/
- index.js
- list.js
3. index.js
//那麼，umi 會自動生成路由配置如下
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/list', component: './pages/users/list.js' },
]2.動態路由
+ pages/
+ $post/
- index.js
- comments.js
+ users/
$id.js
- index.js
[
{ path: '/', component: './pages/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
{ path: '/:post/', component: './pages/$post/index.js' },
{ path: '/:post/comments', component: './pages/$post/comments.js' },
]3.可選的動態路由
+ pages/
+ users/
- $id$.js
- index.js
[
{ path: '/': component: './pages/index.js' },
{ path: '/users/:id?': component: './pages/users/$id$.js' },
]4.嵌套路由
umi 里約定目錄下有 _layout.js 時會生成嵌套路由，以 _layout.js 爲該目錄的 layout
+ pages/
+ users/
- _layout.js
- $id.js
- index.js
----------
[
{ path: '/users', component: './pages/users/_layout.js',
routes: [
{ path: '/users/', component: './pages/users/index.js' },
{ path: '/users/:id', component: './pages/users/$id.js' },
],
},
]
4.路由跳轉
1.聲明式
import Link from 'umi/link';
export default () => (
<Link to="/list">Go to list page</Link>
);2.命令式
import router from 'umi/router';
function goToListPage() {
router.push('/list');
}3.connect 後路由切換後沒有刷新用withRouter
import withRouter from 'umi/withRouter';
export default withRouter(connect(mapStateToProps)(LayoutComponent));5.Use umi with dva
特性
- 按目錄約定註冊 model，無需手動 app.model
- 文件名即 namespace，可以省去 model 導出的 namespace key
- 無需手寫 router.js，交給 umi 處理，支持 model 和 component 的按需加載
- 內置 query-string 處理，無需再手動解碼和編碼
- 內置 dva-loading 和 dva-immer，其中 dva-immer 需通過配置開啓
- 開箱即用，無需安裝額外依賴，比如 dva、dva-loading、dva-immer、path-to-regexp、object-assign、react、react-dom 等
1..umirc.js 裏配置插件（或者在config裏配置）
xport default {
plugins: [
[
'umi-plugin-react',
{
dva: true,
},
]
],
};2.model 註冊
model 分兩類，一是全局 model，二是頁面 model。全局 model 存於 /src/models/ 目錄，所有頁面都可引用；頁面 model 不能被其他頁面所引用。
規則如下：
- src/models/*/.js 爲 global model
- src/pages//models//*.js 爲 page model
- global model 全量載入，page model 在 production 時按需載入，在 development 時全量載入
- page model 爲 page js 所在路徑下 models/*/.js 的文件
- page model 會向上查找，比如 page js 爲 pages/a/b.js，他的 page model 爲 pages/a/b/models//.js + pages/a/models//.js，依次類推
- 約定 model.js 爲單文件 model，解決只有一個 model 時不需要建 models 目錄的問題，有 model.js 則不去找 models/*/.js
+ src
+ models
- g.js//全局model可共用
+ pages
+ a//a 的 page model 爲 src/pages/a/models/{a,b,ss/s}.js
+ models
- a.js
- b.js
+ ss
- s.js
- page.js
+ c//c 的 page model 爲 src/pages/c/model.js
- model.js
+ d//c/d 的 page model 爲 src/pages/c/model.js, src/pages/c/d/models/d.js
+ models
- d.js
- page.js
- page.js6.Umi配置路由方式生成路由連接和加載model
1.在config文件目錄下的config.router.js配置相關參數
{
name: '基礎數據',
icon: 'table',
path: '/basicData',
routes: [
{
path: 'basicData/list',
name: '數據列表',
component: './BasicData/BasicList',
}
]
},2.在pages文件下建好文件，全局model直接寫到src/models下面，頁面model寫到pages/頁面/models
3.umi會自動生成相關的路由及其model的（在.umi的router.js下面自動生成代碼）
{
"name": "基礎數據",
"icon": "table",
"path": "/basicData",
"routes": [
{
"path": "/basicData/list",
"name": "數據列表",
"component": _dvaDynamic({
app: window.g_app,
models: () => [
import('/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/src/pages/BasicData/models/basicDataModal.js').then(m => { return { namespace: 'basicDataModal',...m.default}})
],
component: () => import('../BasicData/BasicList'),
LoadingComponent: require('/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/src/components/PageLoading/index').default,
}),
"exact": true
},
{
"component": () => React.createElement(require('/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/node_modules/[email protected]@umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: true })
}
]
},