完善我的页面

Yi.Vue3.x.Vant/components.d.ts

@@ -7,28 +7,25 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AppGrid: typeof import('./src/components/AppGrid.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
-    VanCell: typeof import('vant/es')['Cell']
     VanCol: typeof import('vant/es')['Col']
     VanGrid: typeof import('vant/es')['Grid']
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanImage: typeof import('vant/es')['Image']
-    VanImagePreview: typeof import('vant/es')['ImagePreview']
     VanList: typeof import('vant/es')['List']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanRow: typeof import('vant/es')['Row']
-    VanSpace: typeof import('vant/es')['Space']
     VanSticky: typeof import('vant/es')['Sticky']
     VanTab: typeof import('vant/es')['Tab']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
     VanTabs: typeof import('vant/es')['Tabs']
-    VantCol: typeof import('vant/es')['tCol']
     VantRow: typeof import('vant/es')['tRow']
   }
 }

Yi.Vue3.x.Vant/src/App.vue

@@ -1,14 +1,16 @@
-<script setup lang="ts">
+
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
 
 <template>
+
+  <!-- <HelloWorld msg="123"></HelloWorld> -->
   <router-view></router-view>
 
 </template>
+<script setup lang="ts">
 
+
+
+</script>
 <style scoped>
 
 </style>

Yi.Vue3.x.Vant/src/components/AppGrid.vue

@@ -0,0 +1,31 @@
+<template>
+    <van-row>
+        <van-col span="24">
+          <p >  {{data.head}}</p>
+        </van-col>
+        <van-col class="col-body" span="6"  v-for="item in data.body"><van-icon name="chat-o" size="2rem" /> <br>{{item.title}}</van-col>
+    </van-row>
+
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import {AppGridData} from '@/type/class/AppGridData.ts'
+defineProps<{ data: AppGridData }>()
+const count = ref(0)
+</script>
+<style scoped>
+.col-body
+{
+text-align: center;
+
+}
+.col-body .van-icon
+{
+    margin-bottom: 0.6rem;
+}
+p{
+font-size: large;
+font-weight: 545;
+}
+</style>
+

Yi.Vue3.x.Vant/src/type/class/AppGridData.ts

@@ -0,0 +1,11 @@
+export class AppGridData{
+    head!: string;
+    body!: AppGridBody[];
+}
+
+
+
+class AppGridBody{
+    icon!: string;
+    title!: string;
+}

Yi.Vue3.x.Vant/src/view/main/square.vue

@@ -1,16 +1,14 @@
 <template >
-    <van-row  >
-<van-col span="24">
-    <div class="test">这里是广场页面</div>
-</van-col>
 
-    </van-row>
-   
 
+  <van-row class="test ">
+    <van-col span="24">
+      <!-- <div class="test">这里是广场页面</div> -->
+    </van-col>
+
+  </van-row>
+
+  <van-col span="24"></van-col>
 </template>
 <style scoped>
-.test
-{
-
-}
 </style>

Yi.Vue3.x.Vant/src/view/my.vue

@@ -29,9 +29,46 @@
             <van-col span="12" >   <van-button class="btn" type="primary">我的签到</van-button></van-col>
         </van-row>
           </van-col >
+
+
+          <AppGrid class="grid" :data='data'></AppGrid>
+          <AppGrid class="grid" :data='data'></AppGrid>
+          <AppGrid class="grid" :data='data'></AppGrid>
     </van-row>
+
+
+
 </template>
+<script setup lang="ts">
+import AppGrid from '@/components/AppGrid.vue'
+import {AppGridData} from '@/type/class/AppGridData.ts'
+let data :AppGridData={
+  head:"你好压抑",
+  body:[
+  {
+    title:"你好",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+]
+};
+</script>
 <style scoped>
+.grid{
+    width: 100%;
+    margin-top: 1rem;
+}
 .headRow{
     padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 }

Yi.Vue3.x.Vant/tsconfig.json

@@ -11,7 +11,8 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    // "strictPropertyInitialization": false
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]