Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen

vite

You Da hat das Vite-Tool in der Live-Übertragung der Vue 3.0-Beta empfohlen und dabei Folgendes hervorgehoben: einen nicht gepackten Entwicklungsserver für Vue-Einzelseitenkomponenten, der die angeforderte Vue-Datei direkt im Browser ausführen kann

Sehr neuartig, dieser Blog verwendet es, um ein Vue3-Projekt zu erstellen

Vite ist ein Webentwicklungs- und Konstruktionstool für moderne Browser, das On-Demand-Kompilierung basierend auf dem nativen Modulsystem ESModule implementiert. Rollup-basierte Verpackung in Produktionsumgebungen

• Schneller Kaltstart des Servers
• Sofortiger Hot-Modul-Austausch (HMR)
• Echte On-Demand-Kompilierung

Knoten >= 10.16.0

Bauen

Verwenden Sie vite, um ein Projekt zu erstellen

npm init vite-app <Projektname>

Installieren Sie Typescript, Vue-Router@next, Axios, Eslint-Plugin-Vue, Sass und andere verwandte Plug-Ins.

Konfiguration

vite.config.ts

vite.config.ts entspricht vue.config.js im @vue-cli-Projekt

Ich konfiguriere einfach Folgendes:

Pfad von „Pfad“ importieren

modul.exporte = {
 Alias: {
 '/@/': Pfad.auflösen(__dirname, './src')
 },
 optimizeDeps: {
 einschließen: ['lodash']
 },
 Proxy: {}
}

Router

Erstellen Sie einen neuen Router-Ordner unter src und erstellen Sie index.ts im Ordner

importiere { createRouter, createWebHistory } von 'vue-router'

const Routen = [
 {
 Weg: '/',
 Name: "Home",
 Komponente: () => import('/@/views/Home.vue')
 },
 {
 Pfad: '/lifeCycle',
 Name: "Lebenszyklus",
 Komponente: () => import('/@/views/LifeCycle.vue')
 }
]

exportiere Standard createRouter({
 Verlauf: createWebHistory('/krry/'),
 Routen
})

TS-Typen

Erstellen Sie eine neue tsconfig.json im Stammverzeichnis des Projekts und schreiben Sie die relevante Konfiguration

{
 "Compileroptionen": {
 ...// Andere Konfigurationspfade: {
  "/@/*": [
  "Quelle/*"
  ]
 },
 "Bibliothek": [
  "esnext",
  "dom",
  "dom.iterable",
  "Skripthost"
 ]
 },
 "enthalten": [
 "src/**/*.ts",
 "src/**/*.tsx",
 "Quelle/**/*.vue",
 "src/types/images.d.ts",
 "tests/**/*.ts",
 "tests/**/*.tsx"
 ],
 "ausschließen": [
 "Knotenmodule"
 ]
}

Erstellen Sie einen neuen Ordner „types“ im Verzeichnis „src“, in dem der TS-Typ konfiguriert werden muss.

shims-vue.d.ts

Deklariere das Modul '*.vue' {}

Bilder.d.ts

Deklarieren Sie das Modul „*.svg“
Modul „*.png“ deklarieren
Modul „*.jpg“ deklarieren
Deklarieren Sie das Modul „*.jpeg“.
Deklarieren Sie das Modul „*.gif“
Modul „*.bmp“ deklarieren
Deklarieren Sie das Modul „*.tiff“.

Haupt-TS

importiere { createApp } von 'vue'
Router von '/@/router' importieren

App aus '/@/App.vue' importieren

const app = createApp(App)
app.use(Router)
app.mount('#app')

Dann können Sie glücklich Code schreiben

vue3-Wissen

aufstellen

In Vue3 sind alle APIs in die Setup-Funktion integriert. Sie wird nur einmal vor der Lebenszyklusfunktion ausgeführt. Daher kann die aktuelle Instanz nicht in der Setup-Funktion abgerufen werden und sie kann nicht zum Aufrufen der in der Vue2-Schreibmethode definierten Methoden verwendet werden.

Es werden zwei Parameter akzeptiert: Requisiten, Kontext

// props - Eigenschaften, die von der Komponente context empfangen werden - context setup(props, context) {
 zurückkehren {
 //Zu bindende Daten und Methoden}
}

Requisiten

Die Requisiten in der Setup-Funktion reagieren und werden aktualisiert, wenn eine neue Requisite übergeben wird. Da die Requisiten jedoch reagieren, kann keine ES6-Destrukturierung verwendet werden, da hierdurch die Reaktionsfähigkeit der Requisite aufgehoben würde.

Wenn Sie die Requisite destrukturieren müssen, können Sie dies sicher tun, indem Sie toRefs in der Setup-Funktion verwenden.

importiere { toRefs } von 'vue'

setup(Requisiten) {
 const { Titel } ​​= toRefs(Eigenschaften)
 console.log(Titel.Wert)
}

Kontext

Der Kontext stellt drei Komponenteneigenschaften bereit: { attrs, slots, emit }
Es handelt sich um ein normales und nicht reaktives JavaScript-Objekt. Dies bedeutet, dass Sie die ES6-Destrukturierung problemlos auf den Kontext anwenden können.

Lebenszyklus

Greifen Sie auf Komponenten-Lebenszyklus-Hooks zu, indem Sie ihnen das Präfix „on“ voranstellen.

Da das Setup um die Lebenszyklus-Hooks beforeCreate und created herum ausgeführt wird, müssen Sie diese nicht explizit definieren. Mit anderen Worten: Jeder Code, den Sie in diese beiden Hooks schreiben, sollte direkt in die Setup-Funktion geschrieben werden.

aufstellen() {
 beimMounted(() => {
 console.log('Komponente gemountet')
 })

 beiUnmountet(() => {
 console.log('Komponente deinstallieren')
 })

 beiAktualisiert(() => {
 console.log('Komponentenaktualisierung')
 })

 beiVorUpdate(() => {
 console.log('Komponente wird aktualisiert')
 })

 beiAktiviert(() => {
 console.log('KeepAlive-Komponente aktiviert')
 })

 beiDeaktiviert(() => {
 console.log('KeepAlive-Komponente ist nicht aktiviert')
 })

 zurückkehren {}
}

ref、reaktiv

ref kann einen allgemeinen Wert in responsive Daten einbinden, die auf einfache Werte beschränkt sind. Intern wird der Wert in ein Objekt eingebunden und dann über defineProperty verarbeitet. Beim Abrufen und Festlegen des Werts müssen Sie .value verwenden, um ihn festzulegen. Sie können ref verwenden, um die Referenz der Komponente abzurufen, anstatt this.$refs zu schreiben.

reactive verarbeitet komplexe Daten reaktionsschnell. Sein Rückgabewert ist ein Proxy-Objekt. Bei der Rückgabe in der Setup-Funktion kann das Proxy-Objekt mithilfe von toRefs strukturiert werden, um die Verwendung in der Vorlage zu vereinfachen.

Verwenden Sie es wie folgt:

<Vorlage>
 <div>
 <div>
  <ul v-for="Element in Elementeliste" :key="Element.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addEle">Hinzufügen</button>
 </div>
 <div>
  <ul v-for="Element in Aufgabenliste" :key="ele.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addTodo">Hinzufügen</button>
 </div>
 </div>
</Vorlage>

<Skript>
importiere { ref, reaktiv, toRefs } von 'vue'

Standard exportieren {
 aufstellen() {
 // Referenz
 const eleList = ref([])
 Funktion addEle() {
  let len ​​= eleList.value.length
  eleList.Wert.push({
  ID: Länge,
  Name: 'Ref-Inkrement' + Länge
  })
 }

 // reaktiv
 const dataObj = reaktiv({
  Aufgabenliste: []
 })
 Funktion addTodo() {
  let len ​​= dataObj.todoList.length
  DatenObj.todoList.push({
  ID: Länge,
  Name: 'reaktives Inkrement' + Länge
  })
 }

 zurückkehren {
  eleList,
  hinzufügenEle,
  alles hinzufügen,
  …toRefs(Datenobjekt)
 }
 }
}
</Skript>

berechnet, beobachten

// berechnet
lass Summe = berechnet(() => dataObj.todoList.length + eleList.value.length)
console.log('Setup-Referenzen berechnet auf.Wert:' + Summe.Wert)

//betrachten
betrachten(
 eleList,
 (aktuellerWert, alterWert) => {
 console.log('Listener:', aktuellerWert, alterWert)
 },
 {
 tief: wahr
 }
)

Uhreffekt

Verfolgen Sie die in der Funktion referenzierten Reaktionsdaten reaktionsschnell und führen Sie die Funktion erneut aus, wenn sich die Reaktionsdaten ändern.

Konstante Anzahl = ref(0)
// Wenn der Wert von count geändert wird, wird der Rückruf ausgeführt const stop = watchEffect(() => console.log(count.value))

// Hör auf zuzuhören stop()

Sie können die Überwachung auch beenden. watchEffect gibt eine Funktion zurück, die ausgeführt werden kann, um die Überwachung zu beenden.

Gleich wie vue2:

const unwatch = this.$watch('say', curVal => {})

// Hör auf zuzuhören unwatch()

useRoute, useRouter

importiere {useRoute, useRouter} von 'vue-router'

const route = useRoute() // entspricht this.$route in vue2
const router = useRouter() // entspricht this.$router in vue2

Route dient zum Abrufen der aktuellen Routendaten
Router wird zum Routing von Sprüngen verwendet

vuex

Wenn Sie useStore verwenden, um das Store-Objekt von vuex abzurufen, müssen Sie es mit computed umschließen, sodass der Status in vuex geändert werden kann, bevor auf der Seite darauf geantwortet werden kann.

importiere { useStore } von 'vuex'

aufstellen(){
 const store = useStore() // entspricht this.$store in vue2
 store.dispatch() // asynchrone Aufgaben über das Store-Objekt verteilen store.commit() // Commit zum Ändern der Store-Daten let category = computed(() => store.state.home.currentCagegory
 zurückgeben { Kategorie }
}

Dies ist das Ende dieses Artikels über das schnelle Erstellen eines Vue3-Projekts durch vite+ts und die Einführung zugehöriger Funktionen. Weitere relevante Inhalte zum Erstellen von Vue3 durch vite+ts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!