【Vue】布局解析

1. 电商首页的 Vue 页面布局 Demo

1.1 🧭 最终页面目标结构（电商首页示例）

App.vue├── Header.vue         ⬅️ 页面顶部导航栏├── Home.vue (via <router-view />)│    ├── Banner.vue    ⬅️ 首页轮播图│    ├── Category.vue  ⬅️ 分类导航│    └── GoodsList.vue ⬅️ 商品列表└── Footer.vue         ⬅️ 页面底部信息

1.2 🧱 页面预览效果（结构）

[ Header ]
-------------------------------------------------
[   轮播图 Banner   ]
-------------------------------------------------
[ 分类导航 Category ]
-------------------------------------------------
[ 商品列表 GoodsList ]
-------------------------------------------------
[ Footer ]

1.3 ✅ 第一步：App.vue（主布局）

<template><div class="layout"><Header /><main><router-view /></main><Footer /></div>
</template><script setup>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script><style scoped>
.layout {display: flex;flex-direction: column;min-height: 100vh;
}
main {flex: 1;
}
</style>

1.4 第二步：Home.vue（首页页面）

<template><div class="home"><Banner /><Category /><GoodsList /></div>
</template><script setup>
import Banner from '../components/Banner.vue'
import Category from '../components/Category.vue'
import GoodsList from '../components/GoodsList.vue'
</script><style scoped>
.home {padding: 20px;background: #f9f9f9;
}
</style>

1.5 ✅ 第三步：子组件们

1. Banner.vue<template><div class="banner"><img src="/banner.jpg" alt="banner" /></div>
</template><style scoped>
.banner img {width: 100%;height: 300px;object-fit: cover;
}
</style>

2. Category.vue<template><div class="categories"><div class="item" v-for="cat in ['手机', '电脑', '平板']" :key="cat">{{ cat }}</div></div>
</template><style scoped>
.categories {display: flex;justify-content: space-around;margin: 20px 0;
}
.item {background: white;padding: 10px 20px;border-radius: 8px;box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
</style>

3.GoodsList.vue<template><div class="goods-list"><div class="goods-item" v-for="i in 4" :key="i"><img src="/good.jpg" alt="good" /><p>商品 {{ i }}</p></div></div>
</template><style scoped>
.goods-list {display: flex;flex-wrap: wrap;gap: 20px;
}
.goods-item {width: 200px;padding: 10px;background: white;border-radius: 8px;text-align: center;
}
.goods-item img {width: 100%;height: 150px;object-fit: cover;
}
</style>

4. Header.vue & Footer.vue

<!-- Header.vue -->
<template><header class="site-header"><h1>MyShop</h1></header>
</template><style scoped>
.site-header {background: #333;color: white;padding: 20px;text-align: center;
}
</style><!-- Footer.vue -->
<template><footer class="site-footer"><p>© 2025 MyShop 版权所有</p></footer>
</template><style scoped>
.site-footer {background: #eee;text-align: center;padding: 20px;
}
</style>

1.6 🧪 最后一步：设置路由（router/index.js）

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'export default createRouter({history: createWebHistory(),routes: [{ path: '/', component: Home }]
})