umi中后台项目实践

「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念 T 恤，走过路过不要错过哦

背景

中后台项目一般都有较强的页面结构或者逻辑一致性，页面比如像搜索、表格、导航菜单、布局，逻辑方面比如像数据流，权限。如果基于 Webpack 封装这些功能就需要比较大的前期工作，Umi 则以路由为基础，并以此进行功能扩展，包含微前端、组件打包、请求库、hooks 库、数据流等。基于此在公司内落地 umi 的实践。

目录结构

基于 umi 的项目整体目录结构说明，对项目能有个大致的了解

├── package.json
├── config
  └── config.js
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.js
    ├── locales
    ├── models
    ├── pages
        ├── index.less
        └── index.js
    ├── services
    ├── wrappers
    ├── global.js
    └── app.js

• config.js — 主要是路由配置，插件配置，webpack 配置

• layouts — 布局相关

• locales — 国际化

• models — dva 数据流方案或者 plugin-model

• wrappers — 配置路由的高阶组件封装，比如路由级别的权限校验

• app.js — 运行时配置，比如需要动态修改路由，覆盖渲染 render，监听路由变化

• global.js — 全局执行入口，比如可以放置 sentry 等

路由

路由可以说是前端项目的基石，下面谈谈路由相关的配置

// config/route.js
export default [{
  path: '/merchant',
  name: '商户管理',
  routes: [
    {
      path: '/merchant/list',
      name: '商户列表'
      component: './list'
    },
    {
      path: '/merchant/detail',
      name: '商户详情',
      hideInMenu: true,
      component: './detail'
    }
  ]
}]

路由配置除了常规的 name，path，component 也可以支持配置 umi 插件的配置选项，比如pro-layout的 hideInMenu 来隐藏路由对应导航菜单项

路由组件按需加载可以在 config.js 中配置开启

// config/config.js
export default {
  dynamicImport: {}
}

路由也支持 hook 钩子操作&#