携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

umi学习连接

umijs.org/zh/guide/#%…

umi特点：

1. 开箱即⽤
2. 功能完备的路由约定
3. 完善的插件体系
4. ⾼性能
5. ⽀持静态⻚⾯导出
6. 开发启动快
7. ⼀键兼容到 IE9
8. 完善的 TypeScript ⽀持
9. 与 dva 数据流的深⼊融合

dva

1.dva组成

• 路由： React-Router
• 架构： Redux
• 异步操作： Redux-saga 注：dva是⽬前react最流⾏的数据流解决⽅案（dva = React-Router+ Redux + Redux-saga）
• 图示：

• State：⼀个对象，保存整个应⽤状态
• View：React 组件构成的视图层
• Action：⼀个对象，描述事件
• connect ⽅法：⼀个函数，绑定 State 到 View
• dispatch ⽅法：⼀个函数，发送 Action 到 State

2.dva与umi的约定

• src 源码
  1）pages ⻚⾯
  2）components 组件
  3）layout 布局
  4）model 数据模型
• confifig 配置
• mock 数据模拟
• test 测试

全局安装umi

npm install umi -g或yarn global add umi

快速新建⻚⾯

umi g page index //快速创建index页面
umi g page about  //快速创建about页面

umi⾥⾯的嵌套路由与动态路由

• 通过属性的{props.children}显示⼦组件内容
• 动态路由⽂件命名为$开头
• props.match.params拿到路由里面的参数

umi⾥引⼊antd

• 安装antd： npm install antd -S
• 安装umi-plugin-react：npm install umi-plugin-react -D
• 安装好之后配置confifig⽂件夹下的confifig.js⽂件增加以下配置跟routes同级

plugins: [

    [
        "umi-plugin-react",
        {
        antd: true,
        }
    ]

],

umi引⼊dva进⾏开发

1.dva主要是软件分层的概念

• Page负责与⽤户直接打交道：渲染⻚⾯、接受⽤户的操作输⼊，侧重于展示型和交互逻辑
• Model负责处理业务逻辑，为Page做数据、状态的读写等操作
• Service主要负责跟HTTP做接⼝对接，跟后端做数据交互，进⾏纯粹的数据读写

2.配置⽂件confifig.js

plugins: [
    [
    "umi-plugin-react",
        {
        antd: true,
        dva:true
        }
    ]
]

3.model

export default {
    namespace: "goods", // model的命名空间，区分多个model
    state: [], // 初始状态（数据必须要有）
    effects: {// 异步操作
    },
    reducers: {}
};