内容简介:umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件启动 umi dev 后,大家会发现 pages 下多了个 .umi 的目录请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件,约定 pa
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.json
3.约定式路由
启动 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.js
6.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/_umi-build-dev@1.3.5@umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: true }) } ] },
以上所述就是小编给大家介绍的《Umi.js》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。