基于umi的React项目结构介绍

本项目是基于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项目结构就讲完了。

在Umi3官方文档中，有一个配置项exportStatic需在配置文件（umirc.ts或config/config.ts）中设置，语法如下： Umi框架配置 html 的输出形式，默认只输出 index.html。如果需要预渲染，请开启 ssr 配置，常用来解决没有服务端情况下，页面的 SEO 和首屏渲染提速。如果开启 exportStatic，则会针对每个路由输出 html 文件。 举个例子，路由配置如下： 在不开启 exportStatic 时，输出： 设置 exportStatic: {} 后，输出： 设置 exportStatic: { htmlSuffix: true } 后，输出： 若有 SEO的话需求，可开启 ssr 配置，在 umi build 后，会路由（除静态路由外）渲染成有具体内容的静态 html 页面，例如在配置文件（umirc.ts | config/config.ts）中有如下路由配置： 设置 { ssr: {}, exportStatic: { } 后，且在编译后，生成如下产物： 考虑到预渲染后，大部分不会再用到 umi.server.js 服务端文件，构建完成后会删掉 umi.server.js 文件如果有调试、不删除 server 文件需求，可通过环境变量 RM_SERVER_FILE=none 来保留。 转载：码书网「链接」

umi官方文档

对比以往使用的 create-react-app 搭建react项目，根据需要我们还得集合webpack打包，或者引入redux状态管理器等，而umi ---

通过 create-umi提供脚手架能力，

然后我们可以选择需要生成的项目类型：

确定后，会根据选择自动创建好目录和文件

安装依赖， yarn start 启动项目。

umi 以路由为基础的，支持类 next.js 的 约定式路由 ，以及各种进阶的路由功能，并以此进行功能扩展，比如支持 路由级的按需加载 。

(1) 无需手动配置路由

根据pages目录自动生成路由配置，会根据 src / pages 下 文件名自动生成路由

（也可以配置.umirc.js中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析）

(2) 其他基础知识：

(3)常用的路由操作

(1)全局layout

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

比如：

(2)不同的全局layout

可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。

比如想要针对 /login 输出简单布局:

(3)尝试

要求： 登录页和首页显示不同的布局

同样对 location.path 做区分，但是如果是动态路由或者嵌套路由这样的匹配是有漏洞的。

优化后：

配置路由对应的布局，默认使用NavigatorLayout

根据正则判断

用之前先把mock使用示例看看==>mock.js文档

(1)在umi中使用mock：

---