添加示例文档

src/components/AlertBox.vue

@@ -0,0 +1,15 @@
+<script setup>
+</script>
+
+<template>
+<div class="alert-box">
+    <strong>This is an Error for Demo Purposes</strong>
+    <slot />
+</div>
+</template>
+
+<style scoped>
+.alert-box {
+    color: red;
+}
+</style>

src/views/TestView.vue

@@ -2,6 +2,9 @@
 import { ref } from 'vue'
 import ButtonCounter from '@/components/ButtonCounter.vue'
 import BlogPost from '@/components/BlogPost.vue'
+import AlertBox from '@/components/AlertBox.vue'
+import HomeView from './HomeView.vue'
+import GameView from './GameView.vue'
 
 const posts = ref([
   { id: 1, title: 'test01' },
@@ -10,6 +13,14 @@ const posts = ref([
 ])
 
 const postFontSize = ref(1)
+
+const currentTab = ref('HomeView')
+
+const tabs = {
+  HomeView,
+  GameView
+}
+
 </script>
 
 <template>
@@ -25,6 +36,22 @@ const postFontSize = ref(1)
       @enlarge-text="postFontSize += 0.1"
     ></BlogPost>
   </div>
+
+  <AlertBox>
+    test
+  </AlertBox>
+
+  <div class="demo">
+    <button
+    v-for="(_, tab) in tabs"
+    :key="tab"
+    @click="currentTab = tab">
+      {{ tab }} 
+    </button>
+    <KeepAlive>
+      <component :is="tabs[currentTab]" />
+    </KeepAlive>
+  </div>
 </template>
 
 <style scoped></style>