Fri Sep 1 13:54:00 CST 2023 inscode

src/App.vue

 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <router-view />
 </template>
 
 <style scoped>

src/components/HelloWorld.vue

@@ -2,7 +2,7 @@
 defineProps({
   msg: {
     type: String,
-    required: true
+    default: '123'
   }
 })
 </script>

src/router/index.js

@@ -10,7 +10,7 @@ const routes = [
     {
         path: '/compare',
         name: 'Compare',
-        component: () => import('@/view/compare'),
+        component: () => import('@/components/HelloWorld'),
     }
 ]
 

src/view/compare.vue

+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>