react基本配置

官网：react

全局安装

npm i -g create-react-app

创建项目

npx create-react-app my-app

dom事件控制路由跳转

npm i create-router-dom --save-dev

sass安装配置

npm i sass-loader node-sass --save-dev

sass全局变量 预加载

npm i sass-resources-loader -D

打开配置项（如果报错 ）

先执行

git add .

git commit -m 'init'

在执行

npm run eject

找到config/webpack.config.js

         {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ).concat({
                loader:'sass-resources-loader',
                options:{
                  resources:[
                    path.resolve(__dirname,'../src/styles/index.scss')
                  ]
                }
              }),
             
              sideEffects: true,
            },

代理服务器--跨域

npm install http-proxy-middleware -S

在src下新建文件setupproxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {

  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
  }));

  app.use('/api2', createProxyMiddleware({
    target: 'http://xxx.com',
    changeOrigin: true,
    pathRewrite: { //路径替换
      '^/api2': '/api', // axios 访问/api2 == target + /api
    }
  }));

};

安装axios

npm install axios -S

在src下新建utils/request.js 拦截器

import axios from 'axios'

const service= axios.create({
  baseURL: '',
  timeout: 5000,
});

service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default service;

配置绝对路径两种方法

   1.在根目录下面创建一个jsconfig.json文件（是根目录 而非src 相当于是和src同级的，添加完成后 一定要记得重新启动项目 这就相当于修改了配置文件 不重启会报错的）

{
    "compilerOptions":{
        "baseUrl":"src"
    },
    "include":["src"]
}

2.  找到config/webpack.config.js  在alias下面添加如下代码

 alias: {
        '@': path.resolve('src')

}

在src下新建api/user.js 封装请求

import request from 'utils/request'

export function Login(data) {
  return request({
    url: '/login/',
    method: 'post',
    data
  })
}