Konstruktions- und Nutzungsprozess des Vue3.0-Projekts

Ich habe vor Kurzem ein altes Projekt umgestaltet und mein Vorgesetzter hat mich gebeten, einen neuen Technologie-Stack zu verwenden. Nun ist es Zeit, mein neues vue3.0 vorzuführen.

Lassen Sie mich ohne weitere Umschweife mit meiner Show beginnen. . . (Das Folgende ist lediglich mein persönliches Verständnis und meine Nutzungsgewohnheiten und dient nur als Referenz.)

1. Projektkonstruktion

1. Sie können vite selbst konfigurieren, aber um Zeit zu sparen, werde ich ein Gerüst verwenden, um es direkt zu erstellen. (Wenn Sie interessiert sind, können Sie Vite studieren, es ist immer noch sehr wohlriechend)

2. Projektgenerierung: in iTerm: vue create myproject

Wählen Sie dann verschiedene Konfigurationen entsprechend Ihren Anforderungen

Wählen Sie die 3.x aus, die wir brauchen

Anschließend den Router nach Bedarf konfigurieren, siehe bereits pack.json. . . Dann npm run serve

OK. Ein grundlegendes 3.0-Projekt wurde erstellt und beendet. (Das ist unmöglich)

2: Verzeichnisstruktur

Die ursprüngliche Verzeichnisstruktur ist wie folgt:

Um die Datenverwaltung zu erleichtern, müssen wir einige andere Dateien anpassen. Das Folgende ist eine einfache Demostruktur:

Hooks werden verwendet, um Methoden einiger gängiger Komponenten zu definieren, die in mehreren Komponenten wiederverwendet oder in Verbindung mit Vuex verwendet werden können.

Durch die Eingabe werden einige TS-Typen definiert, die Sie verwenden müssen. Zum Beispiel:

Verschiedene Typen werden nach unterschiedlichen Komponenten aufgeteilt und dann einheitlich in den Index exportiert. Einige gängige Typen können im Index definiert werden.

request definiert einige HTTP-Anfragen.

base.ts Basispfad

api.ts-Sammlung API

http.ts kann Axios-Anfragen abfangen und die Umgebung konfigurieren. (Entwicklung, Produkt)

Die Gesamtkonfiguration sieht ungefähr so ​​aus: Die API- und TS-Typen werden zentralisiert, um die nachfolgende Verwaltung zu erleichtern.

Außerdem müssen die Komponenten aufgeteilt werden:

Dies ist eine Infoseite. Aufgeteilt in .vue-Dateien und einen Ordner mit Hooks darin. Die .vue-Datei ist die grundlegende Demostruktur. Verschiedene Dateien werden entsprechend den unterschiedlichen Funktionen in Hooks in unterschiedliche Dateien aufgeteilt. Beispiel: Die Datei listDownHooks.ts ist eine Methodensammlung, die zum Anzeigen des Dropdown-Menüs verwendet wird. Sie können eine Stildatei auch separat aufteilen (ich fand das etwas mühsam und habe es deshalb nicht gemacht ...)

Dies ist die Verzeichnisstruktur. Definieren Sie zunächst die grundlegenden Datentypen bei der Typisierung, führen Sie sie dann in die Methoden in Hooks unter jeder Komponente ein und verwenden Sie die entsprechenden Methoden in der .vue-Datei.

Drei: Kompositions-API

Die Composition API ist ein Satz zusätzlicher funktionsbasierter APIs, die eine flexible Zusammenstellung der Komponentenlogik ermöglichen. Es ist besser, mit ts zu essen ~~~

1. Komponente definieren

Aus der Composition API dekonstruiert und mit ts verwendet. Definieren Sie eine Komponente:

exportiere Standard-DefineComponent({});

Wenn Sie ts nicht verwenden, können Sie auch export default {} verwenden.

2. Einrichtung

Der Kernteil der Composition API ist das Highlight von Vue3.0. Ersetzt die Lebenszyklen „beforeCreate“ und „created“.

Sie können im Setup einige Antwortdaten initialisieren.

setup(props, ctx) akzeptiert zwei Parameter, props und ctx (Kontext).

Props sind traditionelle Eltern-Kind-Daten. Es wird nicht empfohlen, Requisiten im Setup zu zerstören, da dies dazu führt, dass die Requisiten nicht mehr reagieren.

ctx kann in Slots, Attrs und Emitt zerlegt werden und seine Verwendung ist ähnlich wie bei 2.0.

3. Ref und reaktiv

Zum Erstellen reaktionsfähiger Daten verwendete Methoden. Dekonstruieren aus vue => importiere {ref, reactive} aus „vue“;

Referenzverwendung:

importiere {ref, defineComponent} von „vue“;
exportiere StandarddefiniereKomponente({
 aufstellen() {
  Konstante Zahl = Ref(0);
  konsole.log(Nummer); 
  zurückkehren {
   Nummer
  }
 }
})

Erstellen Sie reaktionsfähige Daten über den Verweis und sehen Sie sich diese in der Konsole an.

Dies sind Referenzantwortdaten. Beim Bedienen verwenden wir number.value, um die Daten zu bearbeiten und dann das Ergebnis zurückzugeben.

Was ist der Unterschied zwischen der Ref-Deklaration eines Basistyps und eines Referenztyps?

ref deklariert den Basistyp, der ein responsives Objekt von ref erstellt

ref deklariert den Referenztyp und erstellt auch ein Ref-Objekt, aber der interne Teil ist ein responsives Objekt, das mit reaktiven Methoden umschlossen ist.

Wenn Ihr Ref-Objekt in einem reaktiven Modus geändert wird, können Sie es direkt über die Schlüssel- und Wertmethoden abrufen.

Reaktive Nutzung:

importiere {reaktiv, defineComponent, toRefs} von „vue“;
exportiere StandarddefiniereKomponente({
 aufstellen() {
  const obj = reaktiv({   
    menuList: [] als Array<T>
   });
  konsole.log(Nummer); 
  zurückkehren {
    ...toRefs(Objekt);
  }
 }
})

Erstellen Sie Proxy-Antwortdaten. Geben Sie die Daten über toRefs zurück. Der Innenraum sieht wie folgt aus:

Ich persönlich denke, dass einige grundlegende Typen mithilfe von „ref“ genauer definiert werden können und dass für eine Gesamtdefinition „reactive“ verwendet werden kann.

andere:

Einige andere häufig verwendete Methoden wie „Computed“, „Watch“ usw. ähneln in ihrer Verwendung tatsächlich 2.0. Ich werde es hier nicht im Detail beschreiben.

Viertens: Grundlegende Verwendung:

Nehmen Sie als Beispiel eine einfache Nachrichtenliste.

Dabei geht es vor allem darum, während der Mount-Phase die Daten abzurufen und beim Umblättern die Daten zu aktualisieren.

Inhaltsverzeichnis:

src -> Ansichten -> Nachrichten -> Hook -> newsListHook.ts (wird zur Verarbeitung von Listendaten verwendet)

Definieren Sie die Rohdaten in der Datei.

let dataSource = reaktiv({
 Liste: [] als Array<InewsList> // InewsList ist ein Datentyp});

Definieren Sie eine Methode newsList(), die eine Methode getList zum Abrufen von Schnittstellendaten enthält. Eine Methode wird ausgelöst, wenn eine Paging-Anforderung gestellt wird und getList bereitgestellt wird. Geben Sie dann die Daten und Methoden zurück. Der Code lautet wie folgt:

/** * 1. Anforderungsdaten auflisten */ importiere API von '../../../request/api';
importiere {reaktiv, onMounted} von „vue“;
importiere {InewsList} aus '../../../typing';
Exportfunktion newsList(): Objekt { 
 let dataSource = reaktiv({Liste: [] als Array<InewsList>});
 Funktion getList(obj: Objekt): void {
  api.newsList(obj).then(res => {
   Datenquelle.Liste = res.data.data; })
 };
 Funktion beiÄnderung(e: beliebig): void {
  lass start = e || 10;
  const obj = {start,num: 10};
  Liste abrufen (Objekt);
 }; 
 beimMounted(() => {
  const startObj = {start: 1, num: 10};
  getList(Startobjekt);
 }); 
 zurückkehren {
  Datenquelle,
  Liste abrufen,
  beiÄnderung
}}

Verwenden Sie es dann in der Datei „src“ -> „Ansichten“ -> „Neuigkeiten“ -> „News.vue“.

importiere {newsList} aus './Hook/newslistHook';
exportiere StandarddefiniereKomponente({ 
  Name: 'Neuigkeiten',
  aufstellen() { 
  const list = Nachrichtenliste();
  zurückkehren {
   ...Liste // Liste enthält alle definierten Daten und Methoden.
  } 
}})

Konsolenliste:

Auf diese Weise können Sie es direkt in der Vue-Datei rendern und verwenden.

Zusammenfassend lässt sich sagen: Die Methoden und Ereignisse (Klick, Maustaste gedrückt, Taste loslassen usw.), die verwendet werden müssen, können im Hook ausgeführt werden, und die Vue-Datei wird zum Rendern der Daten verwendet.

Im Projekt wird das Vue-Framework von antd verwendet. Es ist am besten, es bei der Verwendung bei Bedarf zu laden. Schließlich ist Antd zu groß.

Menü aus „ant-design-vue/es/menu/index“ importieren
Auswahl aus „ant-design-vue/es/select/index“ importieren
createApp(App).use(store).use(router).use(Menü).use(Auswählen)

Okay, das ist alles. Ein Neuling versucht, vue3.0 zu schreiben. Bitte weisen Sie auf etwaige Mängel hin.

Oben sind die Details des Aufbau- und Nutzungsprozesses von vue3.0-Projekten aufgeführt. Weitere Informationen zum Aufbau und zur Nutzung von vue3.0-Projekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!