pinia

12.vue3/project3/src/main.ts

@@ -1,7 +1,7 @@
 import './assets/book.css'
 import { createApp } from 'vue'
 // import App from './App.vue'
-import App from './views/Demo2.vue'
+import App from './views/Teleport/index.vue'
 import router from './router'
 
 const app = createApp(App)

12.vue3/project3/src/views/Teleport/demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <Teleport to="body">
+    <div class="demo">
+      <h2>demo</h2>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+</script>
+
+<style scoped>
+.demo {
+  width: 400px;
+  height: 400px;
+  background: #00f;
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -200px;
+  margin-top: -200px;
+}
+</style>

12.vue3/project3/src/views/Teleport/index.vue

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