Umi 相关

1. 安装(下载)

1. 创建好一个文件夹,打开命令行工具 输入$ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app

• 这一步操作是下载 package.json 文件,用于 npm 下载依赖.

2. npm install 下载依赖(nodemodules)
3. npm start 启动项目

2. 路由

1. .umirc.ts 文件中用来配置路由组件.

配置路由

1. 在umi.ts文件中,配置 routes属性.

routes: [
    { path: '/', component: '@/pages/index' },
],

约定路由

1. 将 .umirc.ts 文件中的下面配置注释了以后就默认使用 约定路由

routes: [
    { path: '/', component: '@/pages/index' },
],

注意:

1. 使用约定路由,在 pages 文件中创建好组件以后,就会自动配置好路由.
2. 使用约定路由时,已经要将 routes属性给注释了,要不创建的 tsx组件不会生效.

3. pages 文件 (src文件下)

1. 该文件用于存放路由组件.
2. 二级路由需要在该文件下(pages)重新创建一个以一级路由命名的文件夹.
3. 使用 嵌套路由的时候,一定要在文件夹中创建一个 _layout.tsx文件.
   • _layout.tsx 文件就表示需要嵌套组件的父组件.
4. 在创建好的二级文件夹下,创建需要嵌套的路由组件

图解

注意:

1. 使用嵌套路由的时候,一定要在父组件中使用 props.children插槽 ,用来显示嵌套的子组件.

4. 全局 layouts(src文件下)

1. 可以将 声明式路由导航 放在该文件夹下的 index.tsx 文件中
2. 一定要在 该文件中的组件中留好 props.children 插槽,用来显示子组件.

5. 动态路由(路由传参)

1. 如果跳转的路由需要传递参数，就在 pages 文件夹下创建一个新的文件夹，表示需要跳转的路由。
2. 在新创建的路由下创建一个 [参数名].tsx 文件,中括号里面的 变量就是需要传递的参数名.

// 当前组件点击跳转事件
 onClick={() => props.history.push(`/details/${item.filmId}`)}

// 文件路径 pages/details/[cocoId].tsx 
console.log(props.match.params.cocoId)

6. 路由模式 (hash browser)

1. 在 .umirc.ts 文件中通过 history 配置项来配置.

    export default defineConfig({
    nodeModulesTransform: {
        type: 'none',
    },
    // routes: [
    //   { path: '/', component: '@/pages/index' },
    // ],
    fastRefresh: {},
    history: {
        type: 'hash',
    },
    });

7. umi 复杂组件传值

1. src 目录下创建一个 models 文件,用于存放公共状态管理.
2. 在需要用到公共状态管理的组件,使用 connect(()=>{return {}})(components) 高阶函数包裹 组件.
3. 传递状态: props.dispatch({type:reducers中定义的方法,payload:传入公共状态})
4. 接收状态: connect((state)=>{return {name:state.命名空间.需要的属性}})(components)

• 参考文章@大神乔伊

导出一个对象，该对象有如下几个属性：

export default {
	namespace: '',            string，命名空间，通过它来区分调用的哪一个模块的状态管理
	state: {},                object，初始化状态，用于渲染视图
	reducers: {},             function-object，同步方法，用于修改初始化状态
	effects: {},			  function-object，异步方法，用于请求接口，然后调用同步方法修改数据
	subscriptions: {}         function-object，生命周期，应用启动时调用定义好的方法
}