Implementierung der schnellen Projektkonstruktion von vue3.0+vant3.0

vue --version oder vue -V 

npm update -g @vue/cli

npm install -g @vue/cli

vue create hello-world (das ist Ihr eigener Projektname)

importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren
importiere http von './utils/http'; //Hier ist mein eigenes gekapseltes Axios
importiere { Button } von 'vant';

const app = erstelleApp
//vue3.0 kann öffentliche Methodeneigenschaften nicht mehr wie zuvor auf dem Prototypobjekt von vue mounten //Hier kannst du die öffentlichen Methodeneigenschaften in den zweiten Parameter schreiben, der ein Objekt ist //Die Komponentenregistrierung wird über die .use-Kette app(App, { http }).use(Button).use(store).use(router).mount('#app') aufgerufen

<Vorlage>
  <div Klasse="Startseite">
    {{ num }}----{{activeNum}}----{{refData}}
    <!-- Verwendung wichtiger Komponenten-->
    <van-button size="large" type="primary" @click="changeNum">änderndeNummer</van-button>

    <van-button type="success" @click="routerPush">Routensprung</van-button>
  </div>
</Vorlage>

<Skript>
//Welche Module müssen bei Bedarf eingeführt werden? import { toRefs, reactive, onMounted, getCurrentInstance,watch ,computed,ref} from "vue";
Standard exportieren {
  Name: "Home",
  // Wie vue2.0, akzeptiert von übergeordneten Komponenten übergebene Werte und in main.js-Requisiten übergebene Werte: ["http"],
  // Muss im Setup setup(props, context) { geschrieben werden
    //Das ctx hier ist ähnlich wie dieses in vue2
    const { ctx } = getCurrentInstance();
    //Routing dies.$router
    const router = ctx.$router;
    //Die gekapselten Axios, die von main.js übergeben wurden
    const http = ctx.http;
     // Ich empfehle trotzdem nicht, so zu schreiben, weil es mühsam ist, jedes Mal neue responsive Daten mit ref zu umschließen const refData = ref('1212') // ref wird in ein responsives Objekt umschlossen // Ich denke, es ist bequemer, so zu schreiben, ähnlich wie Daten in vue2
    const state = reactive({//Die Funktion empfängt ein normales Objekt und gibt ein responsives Datenobjekt zurück num: 0,
    });
    //Ich schreibe berechnete Eigenschaften gern in Objekte, da es übersichtlicher ist und verhindert, dass die Methoden der berechneten Eigenschaften vermischt werden und schwer zu unterscheiden sind. const computedData = {
      // Vergessen Sie nicht, berechnete Eigenschaften zu importieren, wenn Sie berechnete Eigenschaften schreiben.
      aktiveAnzahl : berechnet(()=>state.num*2)
    }
    //Ich schreibe Methoden gern in Objekten, weil sie übersichtlicher sind und verhindern, dass die Berechnung von Eigenschaftsmethoden vermischt wird und schwer zu unterscheiden ist. const methods = {
      Änderungsnummer: () => {
        staat.num++;
        // Die von ref umschlossenen Daten müssen mit .value refData.value++ abgerufen werden.
      },
      routerPush() {
        //Routensprung router.push({
          Name: "Test",
        });
      },
      //Netzwerkanforderung async getUserInfo() {
        versuchen {
          let { data } = warte auf http.get("http://localhost:3000/xiaochengxu/");
          konsole.log(Daten);
        } Fehler abfangen {
          konsole.log(Fehler);
        }
      },
    };
    // Dasselbe wie in vue2 gemountet. vue 3 entfernt die beiden Lebenszyklen boforcreate und created. setup ist der neue Lebenszyklus zwischen diesen beiden Lebenszyklen. onMounted(() => {
      Methoden.getUserInfo();
    });
    //Verwendung von watchwatch(()=>state.num,value=>{
      console.log('Anzahl geändert',Wert)
    })
    //Um return { verwenden zu können, muss zur Vorlage zurückgekehrt werden.
      ...toRefs(state), // Konvertiere responsive Objekte in normale Objekte. Du brauchst state.num nicht, wenn du sie verwendest. Du kannst num direkt verwenden...methods, // Dekonstruktionszuweisung...computedData,
      Referenzdaten
    };
  },
};
</Skript>