umi 实战学习

1. 快速上手

   1. 安装node，使用yarn管理npm依赖： npm i yarn -g
   2. 搭建脚手架：yarn creat @umijs/umi-app
   3. 安装依赖：yarn  或者  yarn install
   4. 启动项目：yarn start
   5. 修改相关配置在.umirc.ts文件 或 config/fonfig.ts 文件修改
   6. 部署发布：yarn build 
   7. 本地验证：通过yarn build打包的文件需要在服务环境下才能开启，所以需要通过node安装serve服务
      1. 执行：yarn global add serve 安装服务
      2. 执行：serve ./  dist  开启服务
   8. 本地验证完，就可以部署了

2. 目录结构

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

   2. .umirc.ts：配置文件，包含 umi 内置功能和插件的配置。

   3. dist ：执行 umi build 后，产物默认会存放在这里。

   4. mock ：存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

   5. public ：存放项目中的静态文件

   6. src/.umi : 临时文件

   7. src/layouts/index.tsx: 约定式路由时的全局布局文件。

   8. pages 目录: 所有路由组件存放

   9. app.ts : 运行是的配置文件

3. 常用配置：.umirc.ts 或 config/config.ts 中配置项目和插件

   1. base: 跟目录加前缀 /admin 

   2. publishPath: 资源配置目录

   3. outputPath：打包输出文件目录 dist ==> build

   4. title标题: 网站的标题title

   5. history:{type:"hash/browser";Default:{}}  

   6. proxy代理：{}

   7. theme主题配置：theme：{'@primary-color': '#1DA57A',}  

   8. routes路由配置：routes: [ { path: '/', component: '@/pages/index' }, ],

      import { defineConfig } from 'umi';
      
      export default defineConfig({
        nodeModulesTransform: {
          type: 'none',
        },
        base: "",
        title: "首页",
        theme:{...},
        routes: [
          { path: '/', component: '@/pages/index' },
        ],
        fastRefresh: {},
      });
      

4. 路由配置

   1. 默认配置路由，看代码

      export default {
        routes: [
          { path: '/login', component: 'login' },
          {
            path: '/',
            component: '@/layouts/index',
            routes: [
              { path: '/list', component: 'list' },
              { path: '/admin', component: 'admin' },
            ],
          }, 
        ],
      }

   2. 重定向redirect

      export default {
        routes: [
          { exact: true, path: '/', redirect: '/list' },
          { exact: true, path: '/list', component: 'list' },
        ],
      }

   3. history路由相关参数等

      ​match，当前路由和 url match 后的对象，包含 params、path、url 和 isExact 属性
      location，表示应用当前处于哪个位置，包含 pathname、search、query 等属性
      history，同 api#history 接口
      route，当前路由配置，包含 path、exact、component、routes 等
      routes，全部路由信息
      ​

5. 等等。。。