本文适合学习React开发的初学者，通过此框架的使用以利于后期使用antd Pro框架开发更复杂的前端页面Step 1:搭建umi基本框架 umi.js脚手架基本搭建
搭建完成后可以得到如下图所示的项目
文章图片
运行
yarn start指令可以在浏览器中看到如图所示的界面
文章图片
完成以上操作后的问题
- 项目默认使用ts及React Hooks来完成对新手不是很友好
- 没有引入dva.js
dva: {
immer: true,
hmr: false,
},2.在src文件夹下建立 models文件夹，然后在pages文件夹下面建立Demo1文件夹，并在Demo1文件夹中建立models文件夹，建立完成之后如下图所示
文章图片
更详细的说明请参考dva配置
Step 3:使用class组件书写新页面 【使用umi.js 3.0搭建React开发框架】函数组件和Class组件请参考React官方文档：React组件说明
文章图片
在src/pages/Demo1文件夹（上文已建立）下面建立index.js文件
其基本代码如下：
import React, {Fragment} from 'react';
class Demo extends React.PureComponent {
constructor(props) {
super(props);
}render() {
console.log(this.props);
return (
第一个页面
)
}
}export default Demo;
Step 4:定义dva Models并建立连接 在src/pages/Demo1/models中建立文件DemoModels.js文件
export default {
namespace: 'basicDataModel',state: {
data: [
{text: 1, value: 2},
],
},effects: {},reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
},
};
输入以上的代码即建立了名称为basicDataModel的model，
接下来在Step3中建立的index.js中输入如下的代码建立与model的连接
@connect(({basicDataModel}) => ({
basicDataModel,
}))class Demo extends React.PureComponent {注意@connect为函数装饰必须写在class的前面,在index.js中的render函数中输入如下代码即可打印出在this.props可以访问basicDataModel
console.log(this.props);
文章图片
Step 5:完整的umi配置(.umirc.ts文件夹中配置) 配置依据请参考
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
dva: {
immer: true,
hmr: false,
},
ignoreMomentLocale: true,
hash: true,
targets: {
ie: 9,
},
fastRefresh: {},
});
该脚手架的git地址
