React-mobile
移动端React框架，使用react + dva + react-keeper + ant design mobile + ahooks + less 打造移动端框架，本框架主要是记录日常的问题，组件
线上地址 react-mobile-Domesy 语雀地址 React 移动端 入门实战
前言
本框架适用于移动端项目，项目中有过多的使用案例，如dva的使用，dva配置请求的封装，跳转，路由等皆有案例，另外提供antd-mobile等框架的一些组件封装，帮助开发更加简单。
另外有通用方法，高阶组件的封装及使用，让移动端项目一键式开发
cli 安装
$ npm install domesy -g
// 在命令行中使用 domesy 命令即可
如果本项目对你有帮助，请不要吝啬你的star
目录结构
|-- public
|-- src # 开发目录
| |-- components # 业务组件
| |-- images # 存储图片
| |-- mock # 数据模拟
| |-- models # dva模块
| |-- pages # 页面模板
| | |-- _404页面 # 404页面
| | |-- commonPages # 公共页面模块
| | |-- Home.jsx # 公共页面配置模块（不可删除，可放全局小模块）
| |-- router # 路由文件
| |-- styles # 全局css文件
| | |-- common.css # 全局css颜色样式
| | |-- theme.jsx # 配置less全局样式
| |-- utils # 配置模块
| | |-- Jump # 跳转模块
| | |-- Method # 全局配置
| | |-- dva.js # dva配置
| | |-- config.js # 配置模块
|-- .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:移动端组件库
- antd-mobile-icons: icon 库
- 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: 装饰器语法
- webpack-bundle-analyzer： 配置打包分析
- react-router-dom: 路由
- react-keeper: 更适用于移动端，原因是具备缓存页面的功能，类似于具备Vue的keep-alive的功能
- react-redux: react专门封装redux的库
- react-loadable: 路由懒加载
- dva-model-persisit: 数据持久化
- dva-core、dva-loading : dva数据流
- cross-env: 配置分模块打包
- axios: 请求
- ahooks: hooks 集中方法
- qs: 序列化成URL的形式
- mockjs: 模拟数据
- 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存储）
- 实现路由懒加载