「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

UmiJS

文档：umijs.org/zh-CN

插件化的企业级前端应用框架（from：蚂蚁金服）

功能：

• 可扩展：实现完整生命周期，并插件化
• 开箱即用：内置路由、构建、部署、测试
• 完备路由：支持配置式路由和约定式路由，同时保持功能（比如动态路由、嵌套路由、权限路由）
• ...

目录结构

脚手架创建项目

0. 创建目录：mkdir myapp && cd myapp
1. 创建项目：yarn create @umijs/umi-app

Copy:  .editorconfig
Write: .gitignore
Copy:  .prettierignore
Copy:  .prettierrc
Write: .umirc.ts
Copy:  mock/.gitkeep
Write: package.json
Copy:  README.md
Copy:  src/pages/index.less
Copy:  src/pages/index.tsx
Copy:  tsconfig.json
Copy:  typings.d.ts

3. 安装依赖：yarn
4. 启动项目：yarn start

目录结构

.
|- mock
|- disk
|- public
|- config
  |- config.ts
|- src
  |- .umi
  |- layouts / index.tsx
  |- pages
    |- index.less
    |- index.tsx
  |- app.ts
|- package.json
|- umirc.ts

mock

存储mock文件

disk

umi build后的代码默认存放地

public

目录下的文件会被copy到输出路径

package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

umirc.ts & config/config.ts

配置文件，包含 umi 内置功能和插件配置（二选一，umirc.ts 优先级更高）。不复杂的项目配置在 umirc.ts 完成；复杂的项目配置在 config/config.tss 中，并可以拆除一部分配置写成单独文件。

src/.umi 临时文件

由 umi 内部插件及第三方插件生成

框架或插件会根据你的代码生成临时文件，隐藏一些项目中脏乱差的部分。可以在这里调试代码，但是由于他的临时性，每次启动 umi 时都会被删除并重新生成，所以不要提交仓库。

src/layouts/index.tsx

约定式路由的全局布局文件

src/pages

路由组件存放

src/app.ts

运行时的配置文件，可以在这扩展运行时的能力，比如修改路由、render 方法等。

路由

配置式路由

配置文件中：

/*
  @string name: 菜单标题
  @string icon: 菜单图标
  @string path: 路由url
  @string component： 页面路径，从/src/pages/目录开始的相对路径
  @boolean layout：当前路由页面是否展示左侧菜单 & header
  @array routes：子路由/子菜单
  @string redirect：重定向url
*/
​
export default {
  routes: [
    {
      exact: true,
      path: '/',
      component: 'index'
    },
    {
      exact: true,
      path: '/user',
      component: 'user'
    }
  ]
}

说明：

0. exact配置：default true；是否location和path严格匹配

export default {
  routes: [
    // url 为 /one/two 匹配失败
    { path: '/one', exact: true },
    
    // url 为 /one/two 匹配成功
    { path: '/one' },
    { path: '/one', exact: false}
  ]
}

约定式路由

即文件路由，不需要手写配置，文件系统即路由。通过目录和文件及其命名分析出的路由配置。

如果没有routes 配置，umi 会进入约定式路由模式， 然后分析 src/pages目录拿到路由配置。

比如：

.
|- pages
  |- index.tsx
  |- users.tsx
  
  
// ---- 解析路由配置 仅 .js .jsx .ts .tsx 类型文件参与 ----
[
  { exact, true, path: '/', component: '@/pages/index'},
  { exact, true, path: '/users', component: '@/pages/users'}
]

动态路由

[]包裹的文件/文件夹

比如：

.
|- pages
  |- [post]
    |- index.tsx

页面跳转

声明式

import { link } from 'umi'
export default () => {
  <Link to="/list">Go to list page </Link>
}

命令式

import { history } from 'umi';
​
function goToListPage() {
  history.push('/list');
}