// Diese Datei dient zur inkrementellen Konfiguration von Webpack. Es ist CommonJS, das in NodeJS ausgeführt wird
const { lösen } = erfordern ('Pfad')
// In diesem Projekt schrittweise Operationsklassen für die Webpack-Konfiguration ändern und hinzufügen const { addDecoratorsLegacy, override } = require('customize-cra')
// Webpack-Konfiguration anpassen const customize = () => config => {
  // Fügen Sie dem aktuellen Projekt eine @-Zeichenfolge hinzu, um den Importpfad beim Schreiben von Code zu erleichtern config.resolve.alias['@'] = resolve('src')
  Konfiguration zurückgeben
}
// Modul exportieren.exports = override(
  // Dekorator-Unterstützung hinzufügen addDecoratorsLegacy(),
  // Benutzerdefinierte Webpack-Konfiguration hinzufügen customize()
) 

  "Skripte": {
    "Start": "BROWSER=NONE festlegen und react-app-rewired starten",
    "Build": "React-App-Rewired-Build",
    "Test": "React-Scripts-Test",
    "auswerfen": "React-Scripts auswerfen"
  }

// Das Skripttool create-react-app stellt eine Datei speziell für die Proxy-Konfiguration bereit, die für die Ausführung von nodejs gedacht ist // Die Modularisierung verwendet commonjs-Spezifikationen // Das Skripttool create-react-app stellt nur diesen Eintrag bereit, aber der Proxy-Vorgang wird nicht für Sie abgeschlossen // Sie müssen ein Drittanbieterpaket manuell installieren, um den Proxy zu implementieren // npm i -D http-proxy-middleware
// Denken Sie nach der Änderung dieser Datei daran, => den Dienst neu zu starten const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
// App-Objekt ist das Express-Objekt module.exports = app => {
  app.verwenden(
    '/API',
    Proxy({
        Ziel: „https://api.iynn.cn/film“,
        changeOrigin:true,
  }))
}
 

// config-overrides.js wird verwendet, um die Standardkonfiguration zu ändern const { override, fixBabelImports } = require('customize-cra')
modul.exporte = überschreiben(
   fixBabelImports('importieren', {
     Bibliotheksname: "antd-mobile",
     Stil: "css",
   })
)

importiere React, {Komponente} von „react“;
// Importieren Sie die Schaltflächenkomponente von „antd-mobile“. import { Button } von „antd-mobile“;
Klasse App erweitert Komponente {
    rendern() {
        zurückkehren (
            <>
                <Button type="primary">Ich bin ein normaler Button</Button>
            </>
        );
    }
}
Standard-App exportieren;

Höhe: .4rem;
Zeilenhöhe: .4rem;
Hintergrund: #FF6C0C;
Schriftgröße: .18rem;
Textausrichtung: zentriert;
Farbe: #fff;

npm i -g json-server === yarn fügt globalen JSON-Server hinzu
//json-server Standard-Routing-Modus // unterstützt get / post / put / delete und unterstützt auch das Schreiben von Dateien. Es ist domänenübergreifend // data.json
// http-Anforderungsadresse http://xxx/data
{
  "Daten": {
    "Ich würde": 1,
    "Name": "aaa",
    "Alter": 20
  }
}
JSON-Server-Daten.json

exportiere const SearchBox = styled.div`
  Breite: 90vw;
  Höhe: .46rem;
  Anzeige: Flex;
  Rand: 1px durchgezogen #ff6c0c;
  Rand: .15rem automatisch;
  Rahmenradius: 5px;
  Kastenschatten: 1px 1px 5px #ccc;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  img{
    Breite: .2rem;
    Höhe: .2rem;
  }
  Spanne{
    Farbe: Nr. 555;
    Rand links: .1rem;
  }
`

exportiere const HotCateBox = styled.div`
  Hintergrund: #fff;
  .Titel{
    Polsterung: .15rem;
    Farbe: #949494;
  }
`
<Rasterdaten={hotcate}
              Spaltennummer={3}
              Artikelstil = {{ Höhe: '.5rem' }}
              beiKlick={(Zeile, Index) => {
                Konsole.log(Index, diese.Eigenschaften.History.Push)
              }}
              renderItem={dataItem => (
                <div>{dataItem.title}</div>
              )}
            />

<div>
	<h1>Ausgezeichnetes Essen</h1>
	<div>
		<dl>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h3>Getrockneter Tofu mit grünem Pfeffer</h3>
				<p>1000 Aufrufe, 2000 Favoriten</p>
			</dd>
		</dl>
	</div>
</div>

div {
	Polsterung links: .1rem;
	>h1 {
		Höhe: .5rem;
		Zeilenhöhe: .6rem;
		Polsterung links: .15rem;
		Farbe: #666;
		Polsterung links: 0;
	}
	>div {
		Anzeige: Flex;
		Flex-Wrap: Umwickeln;
		>dl {
			Breite: berechnet (50 % – 0,1 rem);
			Hintergrund: #fff;
			Rand rechts: .1rem;
			Rand unten: .1rem;
			dt {
				img {
					Breite: 100 %;
				}
			}
			dd {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Elemente ausrichten: zentrieren;
				Polsterung: .1rem;
				h3 {
					Schriftgröße: .16rem;
				}
				P {
					Schriftgröße: .12rem;
					Farbe: #666;
				}
			}
		}
	}

<ul>
	<li>Kategorie</li>
	<li className="active">Zutaten</li>
	<li className="Schieberegler rechts"></li>
</ul>

Höhe: .44rem;
Hintergrund: #ee742f;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
ul {
	Breite: 1,4rem;
	Höhe: .3rem;
	Anzeige: Flex;
	Position: relativ;
	Rand: 1px durchgezogen #fff;
	Z-Index: 0;
	Randradius: .15rem;
	li {
		biegen: 1;
		Zeilenhöhe: .3rem;
		Textausrichtung: zentriert;
		Farbe: #fff;
		&:letztes-Kind {
			Position: absolut;
			Breite: 50%;
			Höhe: .3rem;
			Hintergrund: #fff;
			z-Index: -1;
			Randradius: .15rem;
			transformieren: übersetzen(0, 0);
			Übergang: alle 0,4 s Einschwingzeit;
			&.Rechts {
				transformieren: übersetzen(100 %, 0);
			}
		}
		&.aktiv {
			Farbe: #ee742f;
		}
	}

<div>
	<div>
		<ul>
			<li class="active"><span>Kategorie</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>Inhalt</li>
		</ul>
	</div>
</div>

.div {
	Höhe: 100%;
	Anzeige: Flex;
	>div:erstes-Kind {
		Breite: .9rem;
		>ul {
			Höhe: 100%;
			Überlauf-y: scrollen;
			li {
				Höhe: .5rem;
				Textausrichtung: zentriert;
				Zeilenhöhe: .5rem;
				Hintergrund: #f3f3f3;
				&.aktiv {
					Hintergrund: #fff;
					Spanne {
						Anzeige: Inline-Block;
						Höhe: 100%;
						Rahmen unten: 1px durchgezogen #ee742f;
					}
				}
			}
		}
	}
	>div:letztes-Kind {
		biegen: 1;
		Hintergrund: #fff;
		Polsterung: .2rem .1rem;
		>ul {
			Anzeige: Flex;
			Flex-Wrap: Umwickeln;
			Überlauf-y: scrollen;
			Höhe: 100%;
			Inhalt ausrichten: Flex-Start;
			li {
				Breite: 33,3333 %;
				Textausrichtung: zentriert;
				Höhe: .5rem;
				Zeilenhöhe: .5rem;
				Farbe: #666;
			}
		}
	}