umi+dva+antd项目搭建

最新推荐文章于 2024-07-25 16:33:55 发布

悟天特斯

最新推荐文章于 2024-07-25 16:33:55 发布

阅读量3.2k

点赞数

分类专栏：前端效果文章标签： react

本文链接：https://blog.csdn.net/wutiantesi/article/details/106812659

版权

前端效果专栏收录该内容

10 篇文章 0 订阅

订阅专栏

umi+dva+antd 项目搭建

说明

umi 是一个可插拔的企业级 react 应用框架。依赖 node 版本是 8.10 或以上。
dva 是一个基于 Redux 的轻量级数据流方案。
antd是 Ant Design 的 React 实现，开发和服务于企业级后台产品。

设计特点

react页面组件化
页面的每个部件，比如头部，内容区，弹出框甚至确认按钮都可以成为一个组件，每个组件有独立的HTML、css、js代码。可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。
Ant Design 是 React 实现，开发和服务于企业级后台产品。需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 umi 里可以把这部分抽成组件components，即页面的组件化，供页面使用及复用，简化开发。
umi约定式路由
umi会根据pages目录自动生成前端路由配置，文件（及其目录）名即路由结构名称。
umi 里约定目录下有_layout .js 时会生成嵌套路由，以 _layout.js 为该目录的 layout，并可以在layouts/index.js （或_layout.js）对 location.path 做区分，渲染不同的 layout 。
单向数据流
React单向数据流：React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。
Dva单向数据流：数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。
model自动注入
umi 里约定 src/models 下的 model 会被自动注入，你无需手动注入。文件名即 namespace，可以省去 model 导出的 namespace key。

创建应用

创建空目录并执行yarn create umi (或npm install -g create-umi && create-umi)
插件配置选择antd+dva
安装依赖，执行yarn
开发模式启动，执行yarn start，在浏览器里打开 http://localhost:8000，你会看到 umi 的欢迎界面。

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
├── assets/      		// 图片目录
├── compunents/      	// 组件目录
├── models/		      	// 数据模型
├── services/		      	// 接口请求
├── routes/		      	// 配置路由部分
├── utils/		      	// 工具及其他
├── layouts/index.js      	// 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 运行时配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json			//插件的引入

注意特点

约定式路由

约定式路由，src/page目录下的文件，会自动生成路由配置。

嵌套路由

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

Scroll to top

在 layout 组件（layouts/index.js 或者 pages 子目录下的 _layout.js）的 componentDidUpdate 里决定是否 scroll to top。this.props.location !== prevProps.location&&window.scrollTo(0, 0)。

页面间跳转

a)声明式（显参跳转）基于 umi/link，
Go To List
b)命令式（隐参跳转）基于 umi/router，通常在事件处理中被调用。
router.push({ pathname: ‘/list’,state:{},});

配置config/config.js(或.umirc.js)

需配置的项有：
a）routes 配置路由，如果配置了 routes，则优先使用配置式路由，且约定式路由会不生效。
b）exportStatic 如果设为 true 或 Object，则导出全部路由为静态页面，否则默认只输出一个 index.html。在一些场景中，无法做服务端的 html fallback，即让每个路由都输出 index.html 的内容，那么就要做静态化。
c）proxy 配置 webpack-dev-server 的 proxy 属性。如果要代理请求到其他服务器，可以这样配：
“proxy”: { “/api”: { “target”: “http://ip:port”, “changeOrigin”: true, “pathRewrite”: { “^/api” : “” } }}