Detaillierte Erläuterung des vite2.0-Konfigurationslernens (Typescript-Version)

einführen

Die ursprünglichen Worte von You Yuxi.

• vite ähnelt Vue CLI. vite ist ebenfalls ein Build-Tool, das ein grundlegendes Projekt-Scaffolding und einen Entwicklungsserver bereitstellt.
• vite ist ein Entwicklungsserver, der auf browsernativen ES-Importen basiert. Überspringen Sie das Verpackungskonzept. Der Server kompiliert und gibt bei Bedarf zurück.
• Vite ist mehr als zehnmal schneller als webpack und unterstützt Hot Updates, befindet sich aber noch in der Testphase.
• Konfigurationsdateien unterstützen auch Hot-Updates! ! !

erstellen

Führen Sie npm init @vitejs/app aus, ich wähle hier vue-ts

Version

"vite": "^2.0.0-beta.48"

alias

vite.config.ts

const Pfad = require('Pfad')
 Alias: {
  "@": Pfad.auflösen(__dirname, "src"),
  "@c": Pfad.auflösen(__dirname, "src/components")
 },

Konfiguration der Umgebungsvariablen

1. Erstellen Sie im Stammverzeichnis

2. Nur Variablen mit dem Präfix VITE_ werden dem von Vite verarbeiteten Code ausgesetzt. Das Folgende ist die Datei .env.production. Die anderen sind ähnlich.
Shell # Entwicklungsumgebung VITE_APP_ENV = 'development' # API-Adresse VITE_APP_PATH = 'dev/...'

3. Starten Sie die Datei package.json und fügen Sie nach dem Befehl --mode test hinzu. Dies ist dasselbe wie vue2

"dev:test": "vite --Modustest",

4. Die Verwendung unterscheidet sich etwas von vue2. Es kann nicht in vite.config.ts gelesen werden, aber andere Dateien können abgerufen werden

importiere.meta.env

Die Ausgabe ist:

Vue-Router hinzufügen (vue3 verwendet Version 4.0+)

1. Installation

npm i [email protected] --save, Version 4.0 installieren

2. index.ts

importiere {createRouter, createWebHashHistory, RouteRecordRaw} von 'vue-router'
// @ts-ignorieren
const test = () => import('../views/test1.vue')
const routes: Array<RouteRecordRaw> = [
  {Pfad: "/", Weiterleitung: "/test1"},
  {
    Pfad: "/test1",
    Name: 'test1',
    Komponente: Test,
  }
]
const router = createRouter({
  Verlauf: createWebHashHistory(),
  Routen: Routen
})

Standardrouter exportieren

3. Haupt.ts

Router aus "./router" importieren
createApp(App)
  .use(Router)
  .mount('#app')

Vuex hinzufügen (Version 4 oder höher)

1. Installation

npm ich vuex@index -D

2. speichern/index.ts

importiere { createStore } von 'vuex'

exportiere Standard createStore({
 Zustand: {
 },
 //...
})

3. Haupt.ts

Store aus „./store“ importieren

createApp(App)
  .use(speichern)
  .mount('#app')

SCSS-Umgebung

1. Installieren Sie npm i sass -D, Sie können die Sass-Syntax direkt verwenden
2. vite.config.ts, globaler Import von SCSS-Dateien

css: {
  Präprozessoroptionen: {
   scss: {
    additionalData: `@import "./src/assets/scss/global.scss";` //Ihr SCSS-Dateipfad}
  }
 },

Dies ist das Ende dieses Artikels mit einer detaillierten Erklärung zum Lernen der vite2.0-Konfiguration (Typescript-Version). Weitere relevante Inhalte zur vite2.0-Konfiguration finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!