基于umi的React项目结构介绍

Posted 2023-03-09

参考技术A 本项目是基于umi搭建的，具体可以参考 Ant Design 实战教程（beta 版）

以下命令顺序执行，用来完成umi的初始化

然后，我们开始建项目的文件目录

修改package.json

我们运行 npm run dev 就能看到hello world.

现在我们使用的都是umi的默认配置，我们还需要自己的配置

添加 umi-plugin-react 插件

配置 config/config.js 文件

首先我们使用antd的Layout布局，修改src/pages/index.js

重新运行 npm run dev，页面就会显示出当前的界面

在pages下新建home.js文件

修改文件

保存后页面就会发生变化，Content中就会显示 Home的内容

在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，
直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。

在src/assets下新建文件夹

在src/pages/index.js 引用style.scss

在home.js同级新建home.scss 文件

在home.js引用，并修改render

用第二种方法的情况：

刷新页面发现并没有变化，打开浏览器调试窗口，查看sources

找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染)

ps:这个问题当时我找了好久

这个是umi自己默认加上，我们并不想要这个东西，在config/config.js文件中添加配置

现在我们的项目只有一个home页面，我们多加几个，来实现跳转的功能

在home.js同级添加文件 center.js

修改home.js

修改config.js

点击页面的"个人中心"，即可跳转到个人中心页面

除了点击Link跳转页面外，我们还有其他的跳转需求，比如：返回上一个页面，或者登录后跳转。这些都可以算是事件跳转，

修改center.js

在umi中，redux是封装在dva中的，但是我们想用原始的那种redux (仅仅是个人原因)，我们就不去使用dva的模式。

在项目中actions文件主要用于处理请求、异步等，reducers文件则是处理数据以及其他的改变

在reducers目录下新建文件

因为在umi中会自动导入redux和react-redux包，所以我们不需要在安装，可以直接使用

store文件创建好了之后，修改pages/index.js

这样我们可以在所有的页面都使用store内容

修改 pages/home.js

重新启动 npm run dev

此时页面上看不到详情内容，
手动修改一下reducers/home.js 的isShowDesc值为true，保存之后在页面上就能看到详情内容
手动修改只是测试一下

下面我们来利用dispatch修改isShowDesc的值(这里不使用更简单的组件state属性来处理)

给home页面添加一个button，点击button来显示/隐藏详情

这样我们就能够点击按钮来改变详情的状态

网络请求使用fetch,使用mock模拟数据

安装 fetch、mockjs

封装一下请求方法，并使用mockjs模拟请求

在home.js中使用

保存，刷新页面后就能看到数据

Antd的主题定制有好几种方法，该项目是基于umi的，所以就是用umi配置的方法来定制。

在config/config.js 文件中添加配置

在src/assets/css 下新建theme.js文件

这里只修改一个属性值 (其他属性可以参考 文档 )

编译后，home页面的按钮主题就被修改了

至此一个基于umi的react项目结构就讲完了。