从零开始react全家桶+antd后台管理项目构建

---

theme: geek-black

# 全局安装react脚手架 npm install -g create-react-app # 初始化创建react项目 create-react-app my-app # 安装antd yarn add antd 修改 src/App.css，在文件顶部引入 antd/dist/antd.css @import '~antd/dist/antd.css'; # 安装react-router-dom yarn add react-router-dom # 安装axios yarn add axios

安装反向代理 http-proxy-middleware

yarn add http-proxy-middleware

在src文件下创建setupProxy.js文件 ``` const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) { app.use( "/ajax", createProxyMiddleware({ target: "https://m.maoyan.com", changeOrigin: true }) ); }; 在`App.js`里测试axios和反向代理,**测试前需要重启项目** import React from "react"; import axios from "axios"; function App(props) { axios .get( "ajax/movieOnInfoList?token=&optimusuuid=A0DA9810FC4711EB8EB57F2D71C8720EF63AA4FEDA4E49F587C017827E2EDCCD&optimusrisklevel=71&optimuscode=10" ) .then(res => { console.log("debug log --> ", res); }); return

App

; }

export default App;

# 安装sass-loader和node-sass依赖 yarn add sass-loader node-sass --dev ```

全局配置scss变量/函数

yarn add sass-resources-loader --dev

一、在暴露配置文件情况下配置

这里的话如果开启npm run eject，暴露配置文件的话，可以在scss的loader里进行添加。 { test: /.scss$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, { loader: 'sass-resources-loader', options: { resources: [ // resolve方法第二个参数为scss配置文件地址，如果有多个，就进行依次添加即可 path.resolve(__dirname, './../src/assets/scss/output.scss') ] } } ] } 虽然暴露配置文件的做法可以根据自己的需要添加更多元化的配置，但是因为该操作是不可逆的，主要原因有以下几点：

• 无法体验create-react-app更新后带来的功能。 因为你配置是自定义的，就算更新后也不会覆盖eject后的配置。
• 增加代码维护的成本。 create-react-app本意就是为了让用户专注开发而忽略配置，在eject之后，会多出很多配置文件，并且会发现在package.json里加了很多依赖，对于有代码洁癖或者新人同学显得不友好。

二、在不暴露配置文件情况下配置(推荐)

在项目根目录，也就是和package.json同级创建config-overrides.js文件，该文件配置代码如下：

const { override, adjustStyleLoaders } = require("customize-cra"); module.exports = override( // ...其他配置... adjustStyleLoaders(rule => { if (rule.test.toString().includes("scss")) { rule.use.push({ loader: require.resolve("sass-resources-loader"), options: { resources: "./src/assets/scss/output.scss" //这里是你自己放公共scss变量的路径 } }); } }) );

---

更新于2021/08/19

未更新完，持续更新中...