基于Dva和TypeScript的后台管理系统框架

介绍

• dva 基于 redux、redux-saga 和 react-router 的轻量级前端框架。
• roadhog 开箱即用的 react 应用开发工具，内置 css-modules、babel、postcss、HMR 等
• typescript JS的强类型版本
• UI库是Ant Design
• 用tslint做代码规范

安装

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组件对外输出口
│ ├── /routes/         # 路由组件
│ │ └── app.tsx        # 路由入口
│ ├── /models/         # 数据模型
│ ├── /services/       # 数据接口
│ ├── /themes/         # 项目样式
│ ├── /interfaces/     # TS接口文件目录
│ │ └── index.tsx      # 定义全局TS接口，如models的接口等
│ ├── /configs/        # 项目常规配置
│ │ └── Apis.ts        # api配置
│ ├── /utils/          # 工具函数
│ │ └── request.js     # 异步请求函数
│ ├── route.tsx        # 路由配置
│ ├── index.tsx        # 入口文件
│ ├── index.less       # 全局样式
│ └── index.ejs        # 入口html
├── package.json       # 项目信息
├── theme.config.js    # 主题样式配置引入文件
├── tsconfig.json      # TypeScript配置
├── alias.config.js    # 配置webpackConfig.resolve.alias
├── .roadhogrc.mock.js # 配置mock
├── globals.d.ts       # 配置TS全局的声明文件
├── tslint.json        # TSlint配置
└── webpackrc.js       # roadhog配置