背景
项目选型确定了react，尽管之前有过react开发经验，但是也是两三年前的事了，平时也没有主动follow这几年react的发展，所以抱着一个小白的心态重新学习。
主要参考网站：React官方中文文档
开始
1.Create React App
npx create-react-app my-app
cd my-app
npm start
思考
想要自定义项目结构，尤其后期还要实现多页面结构，肯定是要改造的。
一种方式是使用craco，可以参考文章或另行搜索。使用 craco 配置基于 create-react-app 的开发环境
而我选择npm run eject
官方提示——Note: this is a one-way operation. Once you eject, you can't go back!
这行命令的目的是暴露出配置文件。
然后就可以按照自己的需求修改webpack.config.js等文件
安装包（根据自己的需求）
- 引入前端UI组件库，比如Ant Design、MUI
- 引入axios，并进行封装
在src文件夹下创建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文件夹下创建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
