# base-hooks

**Repository Path**: lopck/base-hooks

## Basic Information

- **Project Name**: base-hooks
- **Description**: react-hooks全面的基础开发模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-28
- **Last Updated**: 2022-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍：基本常见的功能都封装实现了
⭐ `路由模块化批量导入`<br>
⭐ `路由高阶组件前置守卫`<br>
⭐ `路由基础404匹配以及显示组件`<br>
⭐ `路由跳转进度条`<br>
⭐ `路由懒加载`<br>
⭐ `redux-toolkit异步同步调用action`<br>
⭐ `redux持久化`<br>
⭐ `基于craco自定义配置webpack`<br>
⭐ `webpack开发环境跨域`<br>
⭐ `webpack配置alias`<br>
⭐ `环境变量的配置`<br>
⭐ `css预处理器less`<br>
⭐ `css模块化实现作用域`<br>
⭐ `antd以及按需导入`<br>
⭐ `axios基础封装`<br>
......
### 仓库地址：https://gitee.com/lopck/base-hooks.git
## 实现（主要思路，具体实现看代码）
1. **路由模块化批量导入:**
参考我的另一篇关于批量导入的博客:[前端批量导入的三种方式以及深入理解require.content中的mode参数 - 掘金 (juejin.cn)](https://juejin.cn/post/7148638828440322061)

2. **路由高阶组件前置守卫**: 参考我的另一篇关于封装路由守卫的博客:[在React中利用递归和迭代手撕一个useRoute和useMatched的功能 - 掘金 (juejin.cn)](https://juejin.cn/post/7148984696553078821)<br>
3. **路由基础404匹配以及显示组件:** 通过\*匹配未知路由重定向到404组件，通过useNavigate实现历史回退，跳转主页等
```
 {
    path: '*',
    element: <Navigate to="/404" replace />,
  }
```
<br>

4. **路由懒加载:** 采用React.lazy再自己封装一个suspense组件配合antd加载中组件作为懒加载过渡<br>
6. **redux-toolkit与持久化** 参考我的另一篇关于Redux的博客：[Vue3和react状态管理之Redux与Pinia的使用比较 - 掘金 (juejin.cn)](https://juejin.cn/post/7144904462941978661)<br>
7. **路由跳转进度条**:采用NProgress在路由守卫组件中开启与关闭<br>
8. **webpack开发环境配置跨域:** 
```
module.exports = {
//webpack和vite对server配置大同小异，webpack属性叫做devServer，vite叫做server
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
            },
        },
    },
```
<br>

9. **webpack配置alias，less与模块化,antd按需导入:** 参考我的另一篇关通过craco自定义配置webpack的博客：[React基于craco自定义配置alias,less以及模块化，antd按需导入，环境变量 - 掘金 (juejin.cn)](https://juejin.cn/post/7151963076282023944)<br>
...