vue3

16.vue3/project/auto-imports.d.ts

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

16.vue3/project/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 {
+    Counter: typeof import('./src/components/Counter.vue')['default']
+    VanButton: typeof import('vant/es')['Button']
+  }
+}

16.vue3/project/package.json

@@ -10,13 +10,18 @@
   },
   "dependencies": {
     "pinia": "^4.0.3",
+    "sass": "^1.104.0",
+    "vant": "^4.10.2",
     "vue": "^3.5.41"
   },
   "devDependencies": {
     "@types/node": "^24.13.3",
+    "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.1",
     "typescript": "~6.0.2",
+    "unplugin-auto-import": "^21.1.0",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.2",
     "vue-tsc": "^3.3.11"
   }

16.vue3/project/src/App.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <Counter></Counter>
+    <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>
   </div>
 </template>
 

16.vue3/project/src/Teleport/demo.vue

@@ -0,0 +1,24 @@
+<template>
+  <Teleport to="body">
+    <div class="box">
+      <h1>demo</h1>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 500px;
+  height: 500px;
+  background: #00f;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -250px;
+  margin-top: -250px;
+}
+</style>

16.vue3/project/src/Teleport/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="content">
+    <h1>index</h1>
+    <hr />
+    <hr />
+    <hr />
+    <Demo></Demo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import Demo from "./demo.vue";
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 900px;
+  height: 900px;
+  background: #f00;
+  //   filter: saturate(10%);
+  filter: blur(10px);
+}
+</style>

16.vue3/project/src/main.ts

@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 // import './style.css'
-import App from './App.vue'
+// import App from './App.vue'
+import App from './Teleport/index.vue'
 const pinia = createPinia();
 const app = createApp(App)
 app.use(pinia);

16.vue3/project/vite.config.ts

@@ -1,7 +1,17 @@
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
-
+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()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
+    Components({
+      resolvers: [VantResolver()],
+    }),
+  ],
 })