基于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配置