pinia

17.Vue3/project4/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

17.Vue3/project4/components.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Count: typeof import('./src/components/Count.vue')['default']
+    VanButton: typeof import('vant/es')['Button']
+  }
+}

17.Vue3/project4/package.json

@@ -14,17 +14,22 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
+    "vant": "^4.9.22",
     "vue": "^3.5.26"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",
     "@types/node": "^24.10.4",
+    "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/tsconfig": "^0.8.1",
     "npm-run-all2": "^8.0.4",
     "typescript": "~5.9.3",
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^30.0.0",
     "vite": "^7.3.0",
     "vite-plugin-vue-devtools": "^8.0.5",
     "vue-tsc": "^3.2.1"

17.Vue3/project4/src/App.vue

@@ -1,15 +1,20 @@
 <template>
   <div>
     <h1>APP</h1>
-    <hr>
-    <hr>
-    <hr>
-    <Count></Count>
+    <!-- <van-button type="primary">主要按钮</van-button>
+    <van-button type="success">成功按钮</van-button>
+    <van-button type="default">默认按钮</van-button>
+    <van-button type="danger">危险按钮</van-button>
+    <van-button type="warning">警告按钮</van-button> -->
+    <hr />
+    <hr />
+    <hr />
+    <!-- <Count></Count> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
+import { ref, reactive } from "vue";
 import Count from "./components/Count.vue";
 </script>
 

17.Vue3/project4/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
-// import App from './App.vue'
+import App from './App.vue'
 // import App from './view/readonly.vue'
-import App from './view/toRaw-markRaw.vue'
+// import App from './view/Teleport/index.vue'
 import PiniaPluginPerSistedstate from 'pinia-plugin-persistedstate'
 // import router from  '.'
 // 先引入创建pinia方法

17.Vue3/project4/src/store/count.ts

@@ -35,7 +35,7 @@ export const useCountStore = defineStore('count1', {
         // 异步
         async asyncAddCount() {
             console.log("执行")
-            // await new Promise((reslove)=>setTimeout(reslove,1000));
+            await new Promise((reslove)=>setTimeout(reslove,1000));
             // this.addCount()
             // await new Promise((reslove)=>setTimeout(reslove,1000));
              this.addCount1();

17.Vue3/project4/src/view/Suspense/demo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>demo</h1>
+    <h3 >
+        {{ title }}
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import axios from "axios";
+import { ref, reactive, onMounted } from "vue";
+let title = ref('')
+// onMounted(() => {
+//   getMain();
+// });
+// const getMain = async () => {
+//   try {
+    
+//   } catch (error) {
+//     throw new Error("请求失败");
+//   }
+// };
+let data = await axios.get(
+      "http://shop-api.edu.koobietech.com/prod/tagProdList"
+    );
+    title.value = data.data.data[0].title;
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/Suspense/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>index</h1>
+    <Suspense>
+        <Demo></Demo>
+        <template #fallback>正在加载中...</template>
+    </Suspense>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import Demo from "./demo.vue"
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project4/src/view/Teleport/demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>demo</h1>
+  <Teleport to="body">
+      <div class="demo">
+        <button @click="isShow =true">开启弹框</button>
+        <button @click="isShow = false">关闭弹框</button>
+        <div class="dialog" v-if="isShow"></div>
+    </div>
+  </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let isShow = ref(false)
+</script>
+
+<style scoped>
+    .demo {
+        width: 500px;
+        height: 500px;
+        background: #ff0;
+        text-align: center;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -250px;
+        margin-top: -250px;
+    }
+    .dialog {
+        width: 300px;
+        height: 300px;
+        background: #f00;
+    }
+</style>

17.Vue3/project4/src/view/Teleport/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="box">
+    <h1>Teleport</h1>
+    <Demo></Demo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import Demo from "./demo.vue";
+</script>
+
+<style  scoped>
+    .box {
+        width: 800px;
+        height: 800px;
+        background: green;
+        filter: saturate(300%);
+    }
+</style>

17.Vue3/project4/vite.config.ts

@@ -4,11 +4,21 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { VantResolver } from '@vant/auto-import-resolver';
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
+    Components({
+      resolvers: [VantResolver()],
+    }),
   ],
   resolve: {
     alias: {