vera0707 / umi-antd-react-create

umi+antd搭建一款灵活的、适用于所有情况的项目框架,吸纳umi数据流的优秀**和antd的完美UI设计,既可快速创建项目,又可完全定制,简单上手

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

## 陈情令之问灵版项目搭建

#### 项目介绍

- 基于umi脚手架搭建的React SPA APP
- 语法支持Typescript/Less
- UI组件基于Antd+主题定制
- 数据请求基于Dva
- 简易采用Hook编写项目

#### 启动项目

- 下载依赖 `npm install`
- 启动开发模式 `npm start` or `npm run start`
- 启动打包模式 `npm run build`

#### 文件介绍

- config
    * config.js  -> umi默认读取的配置文件
    * router.config  -> 路由配置文件 后期做动态路由配置
- mock    -> 本地假数据
- src
    * assets   -> 静态资源文件
    * layouts  -> 页面布局文件
    * pages    -> 页面文件
    * models   -> 数据models层配置
    * services -> 请求地址
    * utils    -> 公用方法

#### 参考文档

- [React Hook介绍](https://react.docschina.org/docs/hooks-intro.html)
- [Dva官方文档](https://dvajs.com/guide/concepts.html#state)
- [umi配置文档](https://umijs.org/zh/config/)


#### 异步请求相关

- 如有跨域问题,请求config/config中配置proxy
- src/services中存放请求地址
- src/models中处理请求逻辑
- view中,通过挂载在props.dispatch方法调用请求


#### 多人协作

- 建议可解耦的模块,通过UI的插件形式进行开发协作
- [UmiJS官方文档](https://umijs.org/zh/guide/umi-ui.html#%F0%9F%91%B7-%E5%BC%80%E5%8F%91%E8%80%85)
- [UI插件开发流程](https://umijs.org/zh/guide/develop-umi-ui-plugin.html#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8F%92%E4%BB%B6)
- [UI插件开发接口](https://umijs.org/zh/plugin/umi-ui.html#%E7%A4%BA%E4%BE%8B)


#### 关于语法

- TS语法与Less语法的作用都是为了我们更好的开发与维护,不应为了使用而使用
- 习惯写Component的童鞋,我们应该向Hook看齐了


About

umi+antd搭建一款灵活的、适用于所有情况的项目框架,吸纳umi数据流的优秀**和antd的完美UI设计,既可快速创建项目,又可完全定制,简单上手


Languages

Language:TypeScript 84.4%Language:JavaScript 6.1%Language:Less 5.6%Language:CSS 2.0%Language:EJS 1.7%Language:Shell 0.1%