基于umi+dva+typescript+mock的react框架

介绍

• umi一个开发框架，目前包含工具 + 路由，已经包含了react、redux、router，不包含数据和视图。

• dva 基于 redux、redux-saga 和 react-router 的轻量级前端框架。

• TypeScript JS的强类型版本

• UI库可选Ant Design 或 ant-design-mobile

• 用tslint做代码规范

• umi内置PWA功能，默认开启，无需单独配置

安装

yarn
# or
npm install

开发

npm run dev

构建

npm run build

项目目录

├── /dist/             # 项目输出目录
├── /mock/             # 数据mock
├── /src/              # 项目源码目录
│ ├── /public/         # 公共文件，编译时copy至dist目录
│ ├── /components/     # UI组件及UI相关方法
│ │ ├── /Component/    # 单个UI组件目录
│ │ │ ├── index.less   # 单个UI组件的样式
│ │ │ └── index.tsx    # 单个UI组件
│ │ └── index.tsx      # UI组件对外输出口
│ ├── /layouts/        # 定义布局文件的目录
│ │ └── index.less     # 定义布局组件的样式
│ │ └── index.ts       # 定义布局组件
│ ├── /pages/          # 路由组件，umi会自动引入该文件夹下的文件为路由组件
│ │ ├── /page1/        # 对应path为‘/page1’
│ │ │ ├── /models/     # '/page1’对应的dva的model，通过umi-plugin-dva自动引入
│ │ │ │ └── index.ts   # 定义'/page1’对应的dva的model
│ │ │ ├── /services/   # '/page1’的services服务文件
│ │ │ │ └── index.ts   # '/page1’某个services
│ │ │ ├── index.less   # 样式
│ │ │ └── index.tsx    # 定义路由组件的文件
│ │ └── index.tsx      # 对应path为根路径‘/’
│ ├── /models/         # dva数据模型
│ ├── /services/       # 数据接口
│ ├── /themes/         # 项目样式
│ ├── /interfaces/     # TS接口文件目录
│ │ └── index.ts      # 定义全局TS接口，如models的接口等
│ ├── /configs/        # 项目常规配置
│ │ └── apis.ts        # api配置
│ ├── /utils/          # 工具函数
│ │ ├── commonModel.ts # 公共model方法，包含reducer - updateState等
│ │ └── request.js     # 异步请求函数
│ ├── global.less      # 全局样式
│ └── dva.ts           # 配置dva的入口，默认使用umi-plugin-dva插件的配置
├── package.json       # 项目信息
├── tsconfig.json      # TypeScript配置
├── .umirc.mock.js     # 配置mock
├── globals.d.ts       # 配置TS全局的声明文件
├── tslint.json        # TSlint配置
├── .webpackrc.js      # webpack配置
└── .umirc.js          # umi配置

其他

• alias统一通过tsconfig.json配置，不用再单独创建alias.config.js通过.webpackrc.js引入了