Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

npm init @vitejs/app meine-vue-app --Vorlage
 

npm installiere vue-router@4 --save

// Router 4.x
importiere { createRouter, createWebHashHistory, RouteRecordRaw } von „vue-router“;
const routes: Array<RouteRecordRaw> = [
  {
    Weg: "/",
    Name: "Home",
    Komponente: () => import("../views/Home/index.vue"),
  },
  {
    Pfad: "/login",
    Name: "Login",
    Komponente: () => import("../views/Login/index.vue"),
  },
];
const router = createRouter({
  Verlauf: createWebHashHistory(),
  Routen
});
Standardrouter exportieren;

const router = createRouter({
  Verlauf: createWebHashHistory(), // Hash-Modus Verlauf: createWebHistory(), // Verlaufsmodus });

// vite.config.ts
importiere { defineConfig } von 'vite'
vue aus '@vitejs/plugin-vue' importieren
const { lösen } = erfordern ('Pfad')

// https://vitejs.dev/config/
exportiere Standard-DefineConfig({
  Plugins: [vue()],
  // Relativen Pfad definieren, @ ersetzt resolve: {
    Alias: {
      '@': auflösen(__dirname, 'src')
    }
  }
})

npm ich vuex@next --speichern

npm installiere vant@next --save

//main.ts
importiere { createApp } von "vue";
App aus "./App.vue" importieren;
Router aus "./router" importieren;
Store aus "./store" importieren;
importiere Vant von „Vant“;
importiere "vant/lib/index.css"; // Globaler Importstil createApp(App).use(router).use(store).use(Vant).mount("#app");

<Vorlage>
   <div>
      <van-nav-bar title="Titel" left-text="Zurück" right-text="Schaltfläche" linker Pfeil fixiert @click-left="onClickLeft" @click-right="onClickRight" />
      <van-nav-bar title="Titel" left-text="Zurück" right-text="Schaltfläche" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
   </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von "vue";

exportiere StandarddefiniereKomponente({
   aufstellen() {
      const onClickLeft = () => Toast("Zurück");
      const onClickRight = () => Toast("Schaltfläche");
      zurückkehren {
         bei Klick nach links,
         beiKlickRechts,
      };
   },
});
</Skript>

// utils/util.ts
// Einfaches Popup-Fenster importiere { Toast } von „Vant“;
export const toast = (Text: Zeichenfolge) => {
  Toast (Text);
};

importiere { defineComponent } von "vue";
importiere { toast } von "@/utils/util";

exportiere StandarddefiniereKomponente({
   aufstellen() {
      const onClickLeft = () => toast("Zurück");
      const onClickRight = () => toast("Schaltfläche");
      zurückkehren {
         bei Klick nach links,
         beiKlickRechts,
      };
   }
});