So erstellen Sie ein React-Projekt mit Vite

Garn erstellen @vitejs/app 

yarn //Abhängigkeiten installieren yarn dev //Entwicklungsumgebung starten 

├── dist/ // Standardverzeichnis für Build-Ausgabe └── src/ // Quellcodeverzeichnis ├── asset/ // Verzeichnis für statische Ressourcen ├── config      
  ├── config.js // Grundlegende Konfiguration im Zusammenhang mit dem internen Geschäft des Projekts ├── components/ // Öffentliches Komponentenverzeichnis ├── service/ // Verwaltung von Geschäftsanforderungen ├── store/ // Gemeinsam genutztes Verzeichnis für die Store-Verwaltung ├── till/ // Verzeichnis der Tool-Funktionen ├── pages/ // Seitenverzeichnis ├── router/ // Verzeichnis der Routing-Konfiguration ├── .main.tsx // Haupteintrag der Vite-Abhängigkeit ├── .env // Konfiguration der Umgebungsvariablen ├── vite.config.ts // Auswahl der Vite-Konfiguration, weitere Informationen finden Sie auf der offiziellen Website-API
└── Paket.json

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter, Route, Switch } von 'react-router-dom'
importiere routerConfig aus './router/index'
importiere './base.less'

ReactDOM.render(
 <Reagieren.StrictMode>
 <HashRouter>
  <Schalter>
  {
   routerConfig.routes.map((route) => {
   zurückkehren (
    <Routenschlüssel={route.pfad} {...route} />
   )
   })
  }
  </Schalter>
 </HashRouter>
 </React.StrictMode>,
 document.getElementById('root')
)

BlogsList aus '@/pages/blogs/index' importieren
Importiere BlogsDetail aus '@/pages/blogs/detail'

Standard exportieren {
 Routen: [
 { exakt: true, Pfad: '/', Komponente: BlogsList },
 { exact: true, Pfad: '/blogs/detail/:article_id', Komponente: BlogsDetail },
 ],
}

importiere * als Information aus './information'
importiere * als Basis von './base'

exportieren {
 Information,
 Base
}

importiere { Anfrage } von '../until/request'

Konstantenpräfix = "/API"

exportiere const getAllInfoGzip = () => {
 Rückgabeanforderung({
 URL: `${prefix}/apis/random`,
 Methode: 'GET'
 })
}

importiere qs von „qs“
importiere Axios von „Axios“;

Schnittstelle IRequest {
 URL: Zeichenfolge
 Parameter?: SVGForeignObjectElement
 Abfrage?: Objekt
 Header?: Objekt
 Methode?: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | undefiniert
}

Schnittstelle IResponse {
 Anzahl: Nummer
 Fehlermeldung: Zeichenfolge
 klassifizieren: Zeichenfolge
 Daten: beliebig
 Detail?: irgendein
 img?: Objekt
}

export const request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
 returniere neues Promise((lösen, ablehnen) => {
  axios(Abfrage ? `${url}/?${qs.stringify(Abfrage)}` : URL, {
   Daten: Parameter,
   Überschriften: Überschrift,
   Methode: Methode,
  })
   .then(res => {
    auflösen(res.data)
   })
   .catch(Fehler => {
    ablehnen(Fehler)
   })
 })
}

importiere { Informationen } von "@/service/index";

const { data } = warte auf Informationen.getAllInfoGzip({ id });

importiere { defineConfig } von 'vite'
importiere reactRefresh von '@vitejs/plugin-react-refresh'
importiere vitePluginImp von „vite-plugin-imp“

exportiere Standard-DefineConfig({
 Plugins: [
 reagierenRefresh(),
 vitePluginImp({
  Bibliotheksliste: [
  {
   Bibliotheksname: "antd-mobile",
   Stil(Name) {
   gibt `antd-mobile/lib/${name}/style/index.css` zurück
   },
  },
  ]
 })
 ],
 lösen: {
 Erweiterungen: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
 Alias: {
  '@': '/Quelle'
 }
 },
 Server: {
 Proxy: {
  // Option zum Schreiben von '/api': {
  Ziel: 'https://www.xxx.xxx',
  changeOrigin: wahr,
  umschreiben: (Pfad) => Pfad.ersetzen(/^\/api/, '')
  },
 }
 },
 css: {
 postcss: {
  Plugins: [
  require('postcss-pxtorem')({ // Konvertiere px-Einheiten in rem-Einheiten rootValue: 32, // Konvertierungsbasis, der Standardwert ist 100, daher wird die Schriftgröße des Root-Tags auf 1rem=50px gesetzt, damit du aus dem Designentwurf abmessen kannst, wie viele px du haben möchtest und direkt im Code weitere px hinzufügen kannst
   propList: ['*'], //Eigenschaftsselektor, * steht für allgemeine Einheitspräzision: 5, //Die Dezimalzahl, auf die die REM-Einheit anwachsen darf, und die Anzahl der Ziffern, die nach dem Dezimalpunkt beibehalten werden.
   exclude: /(node_module)/, // Standard ist false, Sie können (reg) reguläre Ausdrücke verwenden, um bestimmte Ordner auszuschließen})
  ]
 }
 }
})

{
 "Compileroptionen": {
 "Basis-URL": "./",
 "Pfade": {
  "@/*": [
  "Quelle/*"
  ]
 },
}