React - 应用框架 - UmiJS

1 基础环境

1 React 开发中的, 企业级应用框架 (UmiJS)


2 快速上手 -> umi 3.x
--------------------------------------------------------------------------------------
  1 mkdir my-umi   //新建一个空目录 (项目根目录)

  2 cd my-umi

  3 npm create @umijs/umi-app   //创建项目

  4 npm i / tyarn   //安装依赖 (antd)

  5 tyarn start / npm start   //启动项目, 默认 8000
--------------------------------------------------------------------------------------


3 常用的配置修改
--------------------------------------------------------------------------------------
1 hash
  1 取值有俩个 -> true / false (默认)  //及生成的文件后面不包含 hash 码
  2 配置是否让生成的文件包含 hash 后缀, 通常用于增量发布和避免浏览器的加载缓存

2 base
  1 设置路由前缀, 通常用于部署到非根目录

3 history
  1 取值为 json 对象, 默认值为: {
    
    type: 'browser'}
  2 type -> 可选: browser, hash, memory

4 outputPath
  1 取值为字符串, 默认为 dist
  2 指定输出路径

5 publicPath
  1 取值为字符串, 默认为 '/'
  2 配置 publicPath

6 title
  1 配置标题
--------------------------------------------------------------------------------------

2 项目目录结构

# 项目根目录

## dist  //执行 npm run build 生成的文件放在这里

## mock  //存储 mock 文件, 

## public  //此目录下的所有文件会被 copy 到输出路径

## src  //源代码目录
  ### .umi  // 临时文件目录, 如入口文件, 路由等
  ### layouts/index.tsx  //约定式路由时的全局布局文件
  ### pages  //所有路由组件存放在这里
  ### app.ts  //运行时, 配置文件, 可以在这里扩展运行时的能力, 如修改等

## .deitorconfig  //编辑器配置文件
## .gitignore  //git忽略配置文件
## .env  //环境变量, 初始化项目的时候没有该文件, 需要手动添加
## .prettierignore  //代码格式化时忽略的文件配置
## .prettierrc  //代码格式化的规范配置
## .umirc.ts  //umi的配置
## package.json  //插件配置说明文件

3 路由配置

1 简单配置项
--------------------------------------------------------------------------------------
{
    
    
  exact: true,  //匹配到第一个下面的就不会匹配了
  path: '/user',  //路径
  component: 'user',   //路径对应的组件
  redirect: 'login',   //路由重定向
  title: 'xxx',   //标题
  routes: [  //二级路由
    {
    
    
      path: '/about',
      component: 'about'
    },
  ]
}
--------------------------------------------------------------------------------------


1 配置路由  //在配置文件中通过 routes 进行配置，格式为路由信息的数组
--------------------------------------------------------------------------------------
export default {
    
    
  routes: [
    {
    
     exact: true, path: '/', component: 'index' },
    {
    
     exact: true, path: '/user', component: 'user' },
  ],
}
--------------------------------------------------------------------------------------

2