umi-dva

umi 企业级应用框架

• node 需要 10.13.0 以上;

• npm i umi -g
• yarn global add umi
• yarn create umi

// 创建项目
mkdir myapp && cd myapp
yarn create @umijs/umi-app
// 或
npx @umijs/create-umi-app

// 安装依赖
yarn

// 启动项目
yarn start

// 打包
yarn build

// 本地验证
$ yarn global add serve
$ serve ./dist

// 修改配置
// 默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-

// 创建页面
umi g page about

umi g page more/index --typescript --lessumi g page product/[id] --typescript --lsess

// 创建user/user页面 页面即路由 当项目中有配置路由时不生效
umi g page user/user

动态路由

带$前缀的目录或文件为动态路由

创建动态路由页面

• umi g page ./users/'$'id

创建动态路由目录

• umi g page '$'post/index
• umi g page '$'post/commit

嵌套路由

umi 阅读目录下有_layout.js 时会生成嵌套路由，以_layout.js 为该目录的 layout

• umi g layout ./users

启动

• umi dev

部署发布

• umi build

本地验证

发布之前，可以通过 serve 做本地验证

yarn global add serve
serve ./dist

dva 数据流方案,基于 redux 和 redux-saga 的数据流方案，且内置了 react-router 和 fetch

• 安装 dva-cli 工具
• npm install dva-cli -g

• 查看 dva 版本
• dva -v

• dva-cli 创建新项目
• dva new dva-program-name

• 进入项目目录并启动

cd dva-program-name
npm start

安装 umi-plugin-react

• npm i umi-plugin-react -D

创建配置文件.umirc.js

export default {
    plugins:[
        ['umi-plugin-react',{
            dva:true
        }]
    ]
}

创建 model-维护页面数据状态

// ./models/goods.js
export default {
    namespace:'goods', // model的命名空间，区分多个model
    state:[ // 初始状态
        {title:'dd'},
        {title:'dfd'}
    ],
    // 异步操作，基于saga处理副作用，发送请求，获取数据，action触发
    effects:{},
    // 更新状态，用于修改state，由action触发
    reducers:{}
}
// action----reducer和effects的触发器，一般是一个对象，形如{type:'add',payload:todo}
// 通过type属性可以匹配到具体某个reducer或者effect，payload属性则是数据体，用于传递给reducer或effect

dva 组件页面创建流程

• 1. 创建一个组件页面
• 2. 配置路由
• 3. 如果想要配置数据层，可以先创建一个 model
• 4. 如果组件想要和数据层建立连接，可以通过 dva 内置的 connect