当前位置：首页 > VUE

vue实现商城首页

2026-03-10 09:47:00VUE

Vue 实现商城首页的关键步骤

项目初始化与配置
使用 Vue CLI 或 Vite 创建项目，安装基础依赖（如 Vue Router、Vuex/Pinia）。配置路由文件，定义首页的路由路径。引入 UI 组件库（如 Element UI、Vant 或 Ant Design Vue）加速开发。

首页布局结构
采用 Flex 或 Grid 布局设计整体框架，通常包含以下模块：

顶部导航栏（搜索框、用户入口）
轮播图（使用 Swiper 插件实现自动播放）
商品分类导航（图标+文字网格布局）
促销活动专区（时间轴或卡片式设计）
热门商品列表（分页加载，瀑布流优化）
页脚信息（版权、链接等）

数据交互与状态管理
通过 Axios 调用后端 API 获取轮播图数据、商品列表等。使用 Pinia 或 Vuex 管理全局状态（如购物车数量）。动态渲染数据时需处理加载状态和错误边界。

性能优化
对图片使用懒加载（vue-lazyload），路由懒加载拆分代码。商品列表分页请求，避免一次性加载过多数据。利用 KeepAlive 缓存页面减少重复渲染。

响应式适配
通过媒体查询或 UI 库的响应式工具适配移动端。Rem 或 Viewport 单位确保多端显示一致。测试不同设备的交互体验。

核心代码示例

轮播图组件

<template>
  <swiper :autoplay="{ delay: 3000 }" :pagination="{ clickable: true }">
    <swiper-slide v-for="item in banners" :key="item.id">
      <img :src="item.imageUrl" @click="handleBannerClick(item.link)" />
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const banners = ref([]);
const fetchBanners = async () => {
  const res = await axios.get('/api/banners');
  banners.value = res.data;
};
fetchBanners();
</script>

商品列表组件

vue实现商城首页

<template>
  <div class="product-grid">
    <div v-for="product in products" :key="product.id" class="product-card">
      <img v-lazy="product.thumbnail" />
      <h3>{{ product.name }}</h3>
      <p class="price">¥{{ product.price }}</p>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

<style scoped>
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
</style>