尝试实现首页，遇到了渲染顺序的问题

components.d.ts

@@ -11,16 +11,18 @@ declare module 'vue' {
     DropFile: typeof import('./src/components/DropFile.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElTag: typeof import('element-plus/es')['ElTag']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

src/api/store.ts

@@ -11,7 +11,7 @@ export const createStore = payload => {
 
 // 获取全部商店
 export const getAllStore = payload => {
-    return axios.get(`${STORE_MODULE}/all`, payload)
+    return axios.get(`${STORE_MODULE}/`, payload)
         .then(res => {
             return res;
         })

src/router/index.ts

@@ -1,14 +1,13 @@
 import { createRouter, createWebHistory } from "vue-router";
-import Login from "../components/Login.vue"
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [{
         path: '/',
-        component: Login,
+        redirect: '/login',
     },{
         path: '/login',
-        component: Login,
+        component: () => import('../components/Login.vue'),
     },{
         path: '/register',
         component: () => import('../components/Register.vue'),
@@ -27,8 +26,20 @@ const router = createRouter({
         ]
     }, {
         path: '/manager/createStore',
-        component: () => import('../views/MANAGER/createStore.vue'),
+        component: () => import('../views/store/CreateStore.vue'),
     }]
 })
 
+router.beforeEach((to, from, next) => {
+    const role = localStorage.getItem('token');
+
+    console.log(role);
+
+    if (!role && to.path !== '/login') {
+        next('/login');
+    } else {
+        next();
+    }
+});
+
 export {router};

src/views/Home.vue

@@ -1,16 +1,38 @@
 <script setup lang="ts">
-  import Header from "../components/Header.vue"
-  // import Footer from "../components/Footer.vue";
+import Header from "../components/Header.vue"
+import StoreItem from "./store/component/StoreItem.vue";
+import {watch, ref} from "vue";
+import {getAllStore} from "../api/store.ts";
+
+let storeList = ref([])
+
+function getStoreList() {
+  getAllStore().then(res => {
+    storeList = res.result;
+  })
+}
+
+getStoreList();
 </script>
 
 <template>
-
   <Header/>
-  <router-view />
-<!--  <Footer />-->
+  <StoreItem v-for="(storeVO, index) in storeList" :key="index" :store="storeVO" />
 
 </template>
 
 <style scoped>
+.item {
+  border: 1px solid black;
+  /*边框合并*/
+  margin: 0 0 -1px -1px;
+  position: relative;
+  z-index: 0;
+}
 
-</style>
+.item:hover {
+  border-color: #409EFF;
+  border-width: medium;
+  z-index: 1;
+}
+</style>

src/views/store/component/StoreItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  storeVO: {
+    type: Object,
+    required: true
+  }
+})
+//
+// let storeList = ref([])
+
+const id = props.storeVO.id
+const name = props.storeVO.name
+const logoUrl = props.storeVO.logoUrl
+const rating = props.storeVO.rating
+const number = props.storeVO.number
+const location = props.storeVO.location
+
+</script>
+
+<template>
+  <el-card>
+    <img :src="logoUrl">
+    <el-row style="font-size: 20px">
+      {{ name }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      评分人数: {{ number }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      评分: {{ rating }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      地址: {{ location }}
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped>
+
+</style>