So verwenden Sie vite zum Erstellen einer Vue3-Anwendung

1. Installation

Tipp: Derzeit gibt es kein offizielles Übersetzungsdokument für VUE3.0. Aber jemand hat es bereits übersetzt. Habe einen Daumen hoch von You Yuxi bekommen, hier ist die URL https://v3.cn.vuejs.org/

1. Installieren Sie CLI

Denn um vue3 zu verwenden, müssen Sie eine höhere CLI-Version haben, die höher als 4.5.X sein muss
Wenn Sie CLI also nicht installiert haben, installieren Sie einfach die neueste Version. Wenn Sie es bereits haben, können Sie es aktualisieren oder deinstallieren und neu installieren. Am besten installieren Sie es global.

//Globale Installation npm install -g @vue/cli
# ODER
globales Garn-Add @vue/cli
//Globale Deinstallation npm uninstall -g vue-cli
# ODER
Garn global entfernen Vue-CLI
//CLI aktualisieren
npm update -g @vue/cli
# ODER
globales Upgrade von Garn – neueste @vue/cli
// Überprüfen Sie die lokale CLI-Version vue --version

2. Erstellen Sie ein Projekt

Da wir alle VUE3 verwenden, probieren wir das neueste Vite-Build-Tool aus.
Vielleicht kann es Ihnen die Tür zu einer neuen Welt öffnen.

//Erstelle ein neues Projekt npm init vite-app asiterVue3
//Geben Sie das Verzeichnis cd asiterVue3 ein
//Abhängigkeiten installieren npm install
//Führen Sie „npm run dev“ aus.

3. Projekt anzeigen

VUE3.0 ist viel einfacher als VUE2.0 und die Änderungen in main.js sind auch sehr offensichtlich.

VUE 3.0

importiere { createApp } von "vue";
App aus "./App.vue" importieren;
importiere "./index.css";

erstelleApp(App).mount("#app");

VUE 2.0

importiere Vue von „vue“;
App aus "./App" importieren;
Vue.config.productionTip = falsch;

neuer Vue({
 el: "#app",
 Komponenten: { App },
 Vorlage: "<App/>",
});

Als nächstes schauen wir uns App.vue an. Das Offensichtlichste ist, dass es im Vorlagenknoten mehr als nur einen Stammknoten gibt.

//Hier meldet das Vetur-Plugin einen Fehler, der jedoch die Verwendung von <template> nicht beeinträchtigt.
 <img alt="Vue-Logo" src="./assets/logo.png" />
 <HalloWelt msg="Hallo Vue 3.0 + Vite" />
</Vorlage>
<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'
Standard exportieren {
 Name: "App",
 Komponenten:
  Hallo Welt
 }
}
</Skript>

4. Routing Vue-Router hinzufügen

Da wir VUE3.0 verwenden, sollte unser VUE-ROUTER auch der Version 4.X entsprechen.

npm installiere vue-router@next -S

Anhang:

npm install vue-router lädt Version 3.0 herunter, daher müssen wir npm install vue-router@next -S , um sie zu installieren. Hier ist die GitHub-Adresse https://github.com/vuejs/vue-router-next/releases
Stand heute, 14. Oktober 2020, ist die Version v4.0.0-beta.13

Was soll ich tun, wenn ich nach der Installation nicht weiß, wie ich es verwenden soll? Schauen wir uns die offiziellen Beispiele an. Ich werde sie nicht gleich verwenden. Ich werde mich nur auf den Lebenslauf beziehen.

Anhang:
Offizielle Beispieladresse
https://codesandbox.io/s/vue-router-4-reproduction-hb9lh?file=/index.html

Aus Platzgründen füge ich nur den Hauptteil ein

<Skript>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue

   const Home = {
    Vorlage: `<div>Home</div>`,
   }

   const Foo = { Vorlage: '<div>foo</div>' }
   const Bar = { Vorlage: '<div>Bar</div>' }

   const router = createRouter({
    Verlauf: createWebHistory(),
    Routen: [
     { Pfad: '/', Komponente: Home },
     { Pfad: '/foo', Komponente: Foo },
     { Pfad: '/bar', Komponente: Bar },
    ],
   })

   const app = createApp({})
   app.use(Router)

   fenster.vm = app.mount('#app')
</Skript>

Dies sind die offiziellen Beispiele und wir stellen fest, dass die Erstellung von Routen etwas anders ist.
In vue2.0 wird „mode“ verwendet, um die Parameter des Routing-Modus zu steuern, in vue3 wird „createRouter“ jedoch zum Erstellen von Routing-Instanzen verwendet.
Das History-Attribut wird als Parameter zur Steuerung des Routing-Modus verwendet

Wie der Name schon sagt
Die Methode createWebHistory gibt den History-Modus zurück
Die Methode createWebHashHistory gibt ein Hash-Muster zurück

Versuchen wir also, es hinzuzufügen. Erstellen Sie zunächst einen neuen Router-Ordner im src-Verzeichnis, fügen Sie dann eine index.js-Datei unter dem Ordner hinzu und fügen Sie der Datei den folgenden Inhalt hinzu

importiere { createRouter, createWebHashHistory } von "vue-router";

exportiere Standard createRouter({
 Verlauf: createWebHashHistory(),
 Routen: [
  {
   Pfad: "/willkommen",
   Komponente: () => import("../views/HelloWorld.vue"),
  },
 ],
});

Erstellen Sie gleichzeitig einen Ansichtsordner unter src, fügen Sie eine Datei HelloWorld.vue hinzu und fügen Sie den folgenden Code hinzu, da dies das erste Mal ist. Ich werde keine anderen APIs ausprobieren, sondern erst den Effekt ausführen

<Vorlage>
 <div>Hallo Welt!Willkommen bei Vue3.0.Asiter</div>
</Vorlage>

Dann transformieren Sie unsere App.vue

<Vorlage>
 <Router-Ansicht></Router-Ansicht>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Komponenten: {},
};
</Skript>

Ändern Sie abschließend unsere wichtigste main.js-Datei, um den Router zu konfigurieren

importiere { createApp } von "vue";
App aus "./App.vue" importieren;
importiere "./index.css";
Router aus "./route" importieren;
createApp(App)
 .use(Router)
 .mount("#app");

Starten Sie das Projekt und geben Sie http://192.168.1.233:3000/#/weclome in die Adressleiste ein
Wir haben gefunden, was wir wollten.

5. Fügen Sie die Statusverwaltung Vuex hinzu

Da wir VUE3.0 verwenden, muss unser Vuex ab heute auch die entsprechende Version unterstützen. Es wurde auf 4.0.0-beta.4 aktualisiert

Anhang:
Fügen Sie die GitHub-Adresse https://github.com/vuejs/vuex/releases an

npm ich vuex@next -S

Schauen Sie sich dann den offiziellen Fall an https://github.com/vuejs/vuex/tree/v4.0.0-beta.4

importiere { createStore } von "vuex";

exportiere const store = createStore({
 Zustand() {
  zurückkehren {
   Anzahl: 1,
  };
 },
});

Wie der Router hat sich auch die Schreibmethode im Vergleich zu VUE2 geändert. Zuerst erstellen wir eine Instanz aus vuex mit createStore und dann schreiben wir auch eine

Erstellen Sie ein neues Store-Verzeichnis unter dem src-Verzeichnis und fügen Sie eine index.js-Datei hinzu. Schreiben Sie den folgenden Inhalt

importiere { createStore } von "vuex";

exportiere const store = createStore({
 Zustand() {
  zurückkehren {
   Autor: "Asiter",
   beschreiben: "Ein Junge, der Film anwendet",
  };
 },
});
 

Gehen Sie zurück zu unserem main.js und ändern Sie es. Vuex hinzufügen

importiere { createApp } von "vue";
App aus "./App.vue" importieren;
importiere "./index.css";
Router aus "./route" importieren;
importiere { store } aus "./store";
createApp(App)
 .use(Router)
 .use(speichern)
 .mount("#app");
 

Gehen wir in unseren Ansichten zurück zur Datei HelloWorld.vue und ändern sie.

<Vorlage>
 <div>Hallo Welt!Willkommen bei Vue3.0.Asiter</div>
</Vorlage>

<Skript>
Standard exportieren {
 montiert() {
  console.log("Wer ist dieser Mann: >> ", this.$store.state.author);
  console.log("Wie geht es ihm: >> ", this.$store.state.describe);
 },
};
</Skript>

Starten Sie den Server, öffnen Sie die Konsole und geben Sie http://192.168.1.233:3000/#/weclome erneut in die Adressleiste ein.
Habe die Druckinformationen gesehen

Wer ist dieser Mann: >> Asiter
Wie geht es ihm:>> Ein Junge mit Film

6. Zusammenfassung

Das ursprüngliche Projekt endet hier, es gibt noch viele interessante Dinge in vue3. Nächstes Mal werden wir uns die Verwendung der Highlight Composition API von VUE3 ansehen. (Ich hatte in letzter Zeit ein paar Probleme beim Spielen von Genshin Impact)

Dies ist das Ende dieses Artikels über die Verwendung von Vite zum Erstellen von Vue3-Anwendungen. Weitere relevante Inhalte zur Verwendung von Vite zum Erstellen von Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!