移动端React框架,使用react + redux + reack-keeper打造移动端框架,本框架主要是个人博客,里面有文章,antd的使用,web技术栈,jS方法,高阶组件等封装
线上地址 Domesy
请在开发者模式下查看
本框架适用于移动端项目,项目中有过多的使用案例,如redux的使用,redux配置请求的封装,跳转,路由等皆有案例,另外提供antd-mobile等框架的一些组件封装,帮助开发更加简单。
另外有通用方法,高阶组件的封装及使用,让移动端项目一键式开发
|-- public
|-- src # 开发目录
| |-- action # action
| |-- router # 路由配置
| |-- mock # 模拟接口数据
| |-- components # 业务组件
| | |-- Animation # 动画组件库
| | |-- AntD # AntD的组件库
| | |-- Icon # 小组件
| | |-- HighOrder # 高阶组件
| |-- constants # constants
| |-- images # 存储图片
| |-- pages # 页面模板
| |-- store # 状态库
| |-- styles # 全局css文件
| | |-- theme.jsx # 全局css颜色样式
| |-- unilts # 方法库
|-- .gitignore # git忽略文件
|-- package.js # 配置文件
|-- config-overrides.js # 项目配置
- react-app-rewired,customize-cra :react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置形成config-overrides.js
- babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
- antd-mobile:移动端组件库
- rc-form: 配合antd-mobile使用表单
- compression-webpack-plugin: 压缩js为gzip
- less less-loader 配置less
- clear: 清屏
- chalk: 装饰作用,使之终端上的输出加上颜色
- figlet: 作用是将字母转化为图片,使之更加醒目
- postcss-px2rem-exclude:px转化为rem(页面以375为标准)
- lib-flexible:移动端适配问题
- @babel/plugin-proposal-decorators: 装饰器语法
- react-router-dom: 路由
- react-keeper: 更适用于移动端,原因是具备缓存页面的功能,类似于具备Vue的keep-alive的功能
- redux: 态管理工具
- react-redux: react专门封装redux的库
- react-loadable: 路由懒加载
- redux-thunk: 使dispatch支持传函数参数
- redux-logger: 打印日志
- redux-persist: 数据持久化
- axios: 请求
- qs: 序列化成URL的形式
- mockjs: 模拟数据
- react-highlight: React语法高亮
- react-typewriter-hook: 打字机效果
- copy-to-clipboard: 复制
- react-photo-view: 图片放大缩小等操作
- react-draggable-tags: 组件拖拽,可适用于移动端排序
- js-md5: md5加密
- jsencrypt: RSA加密解密
- crypto-js: DES加密,AES加密解密
- qrcode.react: 生成二维码
- antd-mobile组件库
- less(配置全局less文件)
- 别名
- 装饰器
- 页面大小,开发模式下,单位px,打包模式下rem
- 模拟数据开发列表
- redux-logger:开发模式下存在,打包模式下删除looger
- redux-persist:数据持久化(默认以session存储)
- 实现路由懒加载