vue3

20.vue3/project3/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.2",
+    "axios": "^1.18.1",
     "mitt": "^3.0.1",
     "sass": "^1.101.0",
     "tailwindcss": "^4.3.2",

20.vue3/project3/src/Suspesce/Demo.vue

@@ -0,0 +1,32 @@
+<template>
+  <Teleport to="body">
+    <div class="box">
+      <div class="text-3xl">Demo</div>
+      {{ data }}
+      <!-- <ul>
+        <li v-for="item in res.data.data" :key="item.id">{{ item.title }}</li>
+      </ul> -->
+    </div>
+  </Teleport>
+</template>
+
+<script  setup>
+import { ref, reactive, onMounted } from "vue";
+import axios from "axios";
+onMounted(() => {
+  init();
+});
+// const init =  () => {
+
+// };
+// function init() {
+// }
+
+let {
+  data: { data },
+} = await axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList");
+console.log(data, "data");
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/Suspesce/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="content">
+    <h1 class="h-26 text-6xl">Suspense</h1>
+    <hr class="h-10" />
+    <Suspense>
+      <Demo></Demo>
+      <template #fallback> Loading... </template>
+    </Suspense>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Demo from "./Demo.vue";
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './Teleport/index.vue'
+import App from './Suspesce/index.vue'
 import router from './router'
 const app = createApp(App)