Thu Mar 13 10:31:00 CST 2025 inscode

src/App.vue

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

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+    <div>
+        <table>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Name</th>
+                    <th>Qinfeins</th>
+                    <th>Lonifnei</th>
+                </tr>
+            </thead>
+        <tbody>
+                <tr v-for="item in items" :key="item.id">
+                <td>{{item.id}}</td>
+                <td>{{item.name}}</td>
+                <td>{{item.quantity}}</td>
+                <td>{{item.location}}</td>
+                </tr>
+        </tbody>
+        </table>
     </div>
 </template>
 
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
+<script>
+import { ref, onMounted } from 'vue';
+
 
-h3 {
-  font-size: 1.2rem;
-}
+export default {
+  setup() {
+    const items = ref([]);
 
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
+    onMounted(() => {
+      items.value = inventoryItems;
+    });
+
+    return {
+      items,
+      data
+    };
+  },
+};
+</script>
+
+<style scoped>
 
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
 </style>