使用create-react-app构建react项目

安装create-react-app

1、使用 npm
npm install -g create-react-app
2、使用 yarn
yarn add -g create-react-app

构建react项目

1、创建项目
create-react-app my-app
2、创建TS项目
create-react-app my-app --template typescript

 删除多余的文件，调整后的项目目录结构如下

• start 指令用于启动开发者服务器

• build 指令用于打包项目

• test 指令用于测试

• eject 指令用于抽离配置文件

react项目默认隐藏了webpack相关配置文件，如果想要暴露在项目当中，需要执行npm run eject,并且此操作无法回退，此操作根据自行需要执行；

配置@解析别名

不抽离配置文件，需要通过第三方库来修改

npm i @craco/craco -D
npm i @types/node -D

在项目根目录中创建 craco 的配置文件：craco.config.ts

const path = require('path')

module.exports = {
    // webpack 配置
    webpack: {
        // 配置别名
        alias: {
            // 约定：使用 @ 表示 src 文件所在路径
            '@': path.resolve(__dirname, 'src')
        }
    }
}

export {}

因为是ts项目，tsconfig.json仍然不认识@,所以我们也需要在tsconfig.json中添加配置

更改package.json中的运行命令 

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }

跨域问题

只有一个服务器，直接在package.json文件中配置

"proxy": "http://127.0.0.1:8000"

 有多个服务器，使用第三方插件 http-proxy-middleware

npm i http-proxy-middleware -S

在src目录下新建setupProxy.js（注意：该文件名不能更改，否则自动识别不了）

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

module.exports = function (app) {
    app.use(
        '/api', // 待转发请求的目录名
        createProxyMiddleware({
            target: 'http://127.0.0.1:8000', // 转发目标地址
            changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
            pathRewrite: { '^/api': '' } // 去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
        })
    );
    app.use(
        '/hqwl',
        createProxyMiddleware({
            target: 'http://27.0.0.1:8085',
            changeOrigin: true,
            pathRewrite: { '^/hqwl': '' }
        })
    );
}

封装axios

 安装axios

npm i axios
或
yarn add axios

在src/utils目录下新建request.ts

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
    baseURL: '/api', // api base_url
    timeout: 1000 * 60 * 10 // 请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(config => {
    //所有请求开始之前先执行请求拦截器中的内容，如设置token
    return config
}, error => {

})

// 响应拦截器
instance.interceptors.response.use((response) => {
    return response.data
}, error => {

})

// 暴露自定义axios
export default instance;

引入react路由

 安装依赖 react-router-dom

npm i react-router-dom
或
yarn add react-router-dom