背景

項目選型確定了react，盡管之前有過react開發(fā)經(jīng)驗，但是也是兩三年前的事了，平時也沒有主動follow這幾年react的發(fā)展，所以抱著一個小白的心態(tài)重新學(xué)習(xí)。
主要參考網(wǎng)站：React官方中文文檔

開始

1.Create React App

npx create-react-app my-app
cd my-app
npm start

思考

想要自定義項目結(jié)構(gòu)，尤其后期還要實現(xiàn)多頁面結(jié)構(gòu)，肯定是要改造的。
一種方式是使用craco，可以參考文章或另行搜索。使用 craco 配置基于 create-react-app 的開發(fā)環(huán)境
而我選擇npm run eject
官方提示——Note: this is a one-way operation. Once you eject, you can't go back!
這行命令的目的是暴露出配置文件。
然后就可以按照自己的需求修改webpack.config.js等文件

安裝包（根據(jù)自己的需求）

1. 引入前端UI組件庫，比如Ant Design、MUI
2. 引入axios，并進行封裝
   在src文件夾下創(chuàng)建api文件夾來存放所有的api請求

// api下的index.js為例
import request from '@/utils/request'

export const getUserList = (params) => {
    return request({
        url: '/api/v1/user/list',
        method: 'get',
        params
    })
} 

在src文件夾下創(chuàng)建utils存放所有的工具類文件，并新建request.js

import axios from 'axios'

const devBaseURL = '/proxy'
const proBaseURL = ''
const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL
const TIMEOUT = 5000

const service = axios.create({
    baseURL: BASE_URL, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: TIMEOUT // request timeout
})

// request interceptor
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data
        return res
    },
    error => {
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

export default service

路徑代理——在src文件下setupProxy.js文件

// npm install --save-dev http-proxy-middleware
// http-proxy-middleware的版本>=1
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
      createProxyMiddleware('/proxy', {
          target: 'http://XXX.XXX.XXX.XXX:port', // your url
          changeOrigin: true,
          pathRewrite: { '^/proxy': '' }
      })
  )
}

打包編譯

npm run build
npm install -g serve
serve -s build