umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
简单来说
- roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置
- umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发
- dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用
本项目我们采取了 umi + dva 的搭配形式架构。
更多内容参看umi官方文档
环境准备
安装node
// 确保 node 版本是 8.10 或以上
$ node -v
8.1x
使用yarn安装
// 先全局安装yarn
$ sudo npm i yarn -g
yarn -v
// 然后全局安装 umi,并确保版本是 2.0.0 或以上
$ sudo yarn global add umi
umi -v
2.0.0
使用npm安装
// 全局安装 umi,并确保版本是 2.0.0 或以上
$ sudo npm i umi -g
umi -v
2.0.0
$ git clone [git地址] //将项目clone至本地
$ cd [项目目录]
$ npm i
$ npm start || umi start // 任选一种启动项目
.
|-- dist/ // 默认的 build 输出目录
|-- config/
|-- config.js // umi 配置入口
|-- plugins.js // umi 配置。插件配置
|-- routes.js // umi 配置。路由和权限配置
|-- webpack.js // umi 配置 webpack
|-- src/ // 源码目录
|-- assets/ // 静态文件
|-- components/ // 自定义组件
|-- ant_component/ // 二次封装antd的组件
|-- layouts/ // 全局布局
|-- BaseLayout/ // 基础layout,涉及前台及前台权限
|-- ConsoleLayout/ // 控制台layout,涉及控制台及控制台权限
|-- LoginLayout/ // 登录layout,涉及登录模块
|-- ExceptionLayout/ // 涉及异常报错
|-- models/ // 全局models
|-- pages/ // 页面目录
|-- .umi/ // dev 临时目录
|-- page1 // 页面 1,每个页面以文件夹为单位
|-- component // 页面独立组件(根据业务具体配置)
|-- index.js // 页面 1 入口文件
|-- model.js // 页面 1 model文件
|-- service.js // 页面 1 service层
|-- style.css // 页面 1 style
|-- services/ // 全局service层
|-- global.less // 全局样式文件。此文件不走 css modules,且会自动被引入,在这里写全局样式,以及做样式覆盖
|-- global.js // 全局js文件。此文件会在入口文件的最前面被自动引入,在这里加载补丁,做一些初始化的操作等
|-- utils/ // 工具。所有为项目服务的,与业务无关的,工具代码,底层封装
|-- themes/ // ant design 重定义文件。初始化项目时,基于项目UI重定义并扩展ant design样式
|-- constant.js // 静态数据和全局配置
|-- request.js // 网络请求配置。使用umi-request,一个基于 fetch 封装的请求库
|-- storage.js // localStorage 操作
|-- utils.js // 各种工具方法
- 动态url使用{id},同时将上送id,使用sting,number,array,等数据使用API_IDS字段进行上送