UmiJS学习

支持

1. node14+
2. IE9+

一般使用项目场景

1. react + umi + ts + less
2. AntdPro 中后台

目录结构

├── config
│   └── config.ts // 默认设置，路由，代理，主题
│   └── route.ts
├── dist // 打包文件
├── mock // 假数据
│   └── app.ts｜tsx
├── src 
│   ├── .umi // 临时文件，项目有时候新npm i 模块要删掉这个目录重新运行
│   ├── .umi-production
│   ├── pages // 约定页面目录
│   │   └── index.less
│   │   └── index.tsx
│   ├── utils // 功能性函数：为了提高代码的可维护性、可读性和可复用性，按需调用
│   │   └── index.ts // 函数 function
│   │   └── constant.tsx // 对象{} 数组[{label: '1',value:'1'}]
│   │   └── other.tsx // downloadFile, md5等
│   ├── services 
│   │   └── api.ts // 接口
│   ├── app.(ts|tsx)
│   ├── global.ts
│   ├── global.(css|less|sass|scss)
│   ├── overrides.(css|less|sass|scss)
│   ├── favicon.(ico|gif|png|jpg|jpeg|svg|avif|webp)
│   └── loading.(tsx|jsx)
├── node_modules
│   └── .cache
│       ├── bundler-webpack
│       ├── mfsu
│       └── mfsu-deps
├── .env
├── plugin.ts 
├── .umirc.ts // 与 config/config 文件 2 选一
├── package.json
├── tsconfig.json
└── typings.d.ts

使用特色

1. 约定式路由：/src/pages/…/index.tsx
2. 约定式css：/src/pages/…/index.less