# reactadmin

**Repository Path**: jack-code-space/reactadmin

## Basic Information

- **Project Name**: reactadmin
- **Description**: react 后台项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目笔记

#### create-react-app 修改默认配置！
- 1.安装依赖
```
npm install react-app-rewired --save-dev
npm install customize-cra --save-dev
```
- 2.在项目根目录（不是src目录）创建`config-overrides.js`文件，注意名字不要写错
- 3.在`config-overrides.js`中书写配置信息
```javascript
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require('path')  // 导入path模块
function resolve(dir) {   // 返回绝对路径的方法
    return path.join(__dirname, '.', dir)
}

module.exports = override(
    // 配置别名
    addWebpackAlias({
        ["@"]: path.resolve(__dirname,"src")
    })
)
```

- 修改`pagckage.json`里面的启动和打包指令

```json
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}
```

**配置less语法！**

```
npm i less less-loader -D
```

修改`config-overrides.js`中配置信息

```js
const { override, addLessLoader, addWebpackAlias } = require('customize-cra')

const path = require('path')  // 导入path模块
function resolve(dir) {   // 返回绝对路径的方法
    return path.join(__dirname, '.', dir)
}

module.exports = override(
    addWebpackAlias({
        ["@"]: path.resolve(__dirname, "src")
    }),
    addLessLoader()
)
```

#### git相关操作
- 码云或者GitHub上面创建仓库（记得不要选择READEME.md文件去初始化仓库）
- 根据提示关联仓库
    ```javascript
    // 关联仓库
    git remote add origin 仓库地址
    // 推送第一次
    git push -u origin master
    ```
- 分支操作
    ```javascript
    git branch      // 查看本地分支
    git branch -a   // 查看所有分支，本地和远程的
    
    git branch 分支名   // 创建一个新的分支，但是目前依赖在老的分支上面。
    git checkout 分支名   // 切换到某个分支去

    git checkout -b 分支名  // 创建一个新的分支并且切换到该分支去
    
    git merge 分支A    //  将分支A合并到当前所在的分支！ (合并结束之后本地仓库最好再一下commit)
    

    // 将本地非默认分支推送到远程去
    git push origin 分支名
    ```

#### antd按需引入和修改主题
- 执行`npm i  babel-plugin-import -D`
- 修改 `config-overrides.js` 文件，如下
    ```javascript
    const { override, addLessLoader, fixBabelImports, addWebpackAlias } = require('customize-cra')
    const path = require('path')  // 导入path模块
    function resolve(dir) {   // 返回绝对路径的方法
        return path.join(__dirname, '.', dir)
    }

    module.exports = override(
        addWebpackAlias({
            ["@"]: path.resolve(__dirname, "src")
        }),
        // 配置less相关信息
        addLessLoader({
            lessOptions:{
                javascriptEnabled: true,
                modifyVars: {
                    "@primary-color": "#0c8484"
                }
            }
        }),
        // 按需引入   需要安装  npm i  babel-plugin-import -D
        fixBabelImports("import", {
            libraryName: "antd", 
            libraryDirectory: "es", 
            style: true    // change importing css to less
        })
    )
    ```
- 修改配置之后需要重新启动


#### 解决跨域问题
- 方式1：在`package.json`中增加配置`
    ```json
        "proxy": "http://localhost:4000",
    ```
    假设原来请求地址是`http://localhost:4000/api/menulist`,现在只需要写`/api/menulist`就可以
- 方式2：通过`http-proxy-middleware`模块进行跨域代理
    - 安装
        ```
        npm i http-proxy-middleware -S
        ```
    - 创建配置文件`src/setupProxy.js`
        ```javascript
        const { createProxyMiddleware } = require('http-proxy-middleware');
        module.exports = function (app) {
            app.use(
                '/api',
                createProxyMiddleware({
                    target: 'http://localhost:3030/api',
                    changeOrigin: true,
                    pathRewrite:{
                        '^/api':""
                    }
                })
            );
        };
        ```
    - 重新启动项目