React快速开发框架

本框架主要用于快速搭建项目

使用的基本库：webpack+react+react-router+typescript

ps：有不足之处请多多包涵，提出意见或者建议 

目的：

前端开发大多数时间是基于市面上比较流行的成品框架开始进行开发，途中遇到的问题大都和业务相关，和技术原理相关性偏弱。并且，我在使用这些流行框架的时候也发现功能有点过多，导致很多代码都没有去仔细思考。因此，基于自己的实际项目及想法，从头搭建一个建议的项目，后续根据项目的迭代慢慢更新、优化。

框架基础库：

React、Antd、Axios、dayjs、i18next、lodash、style-components、webpack等

项目答疑:

1. 为什么不使用Redux做全局数据管理？

   之前的项目都是用过Redux，但是就项目体量来说，我暂时没有体会到Redux的便利性，我个人来说对于中小项目不使用Redux写的更舒服，数据链路更加清晰；因此我使用React自带的Reducer进行处理全局数据管理；

2. 为什么使用style-components？

   为了解决多组件样式污染的问题，不过缺点就是同一个Wrapper中不能相同样式

3. webpack进行了哪些优化？

        目前根据在做的项目进行代码分隔，css压缩，通用生产环境优化等处理                

代码地址：项目模版

准备工作

安装依赖

npm i

安装推荐插件并重启VSCode

• dbaeumer.vscode-eslint
• editorconfig.editorconfig
• esbenp.prettier-vscode
• stylelint.vscode-stylelint
• styled-components.vscode-styled-components
• lokalise.i18n-ally
• bradlc.vscode-tailwindcss

启动项目

npm run start

打包项目

npm run build

目录说明

• src/api 所有接口的位置
• src/asset 静态资源
• src/hooks hook的位置
• src/layouts 页面布局，其中包含了Wrapper鉴权
• src/pages/ 业务页面
• src/router 路由配置
• src/store/ 全局store，通过useStore()获取内容
• src/theme/ 通用样式配置
• src/utils 工具函数
• types/ 全局类型定义
• .env.development 开发环境的环境变量配置
• .env.production 生产环境的环境变量配置
• .eslintignore eslint配置文件
• .gitignore git配置文件
• .prettierignore prettier配置文件
• .styleintignore styleint配置文件
• public/index.html 打包模版html文件，可以更改其中的等待页面内容
• .tailwind.config.js tailwind的配置文件
• webpack.config.js webpack通用配置文件
• webpack.dev.js webpack开发环境配置文件
• webpack.prod.js webpack生产环境配置文件