当前位置：首页 > VUE

vue商城首页实现

2026-02-18 10:14:11VUE

Vue 商城首页实现

项目初始化与依赖安装

使用 Vue CLI 创建项目，安装必要依赖如 Vue Router、Axios、Element UI（或 Vant 等 UI 框架）：

vue create mall-frontend
cd mall-frontend
npm install vue-router axios element-ui

路由配置

在 src/router/index.js 中配置首页路由：

vue商城首页实现

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home }
  ]
})

首页组件结构

src/views/Home.vue 基础结构示例：

<template>
  <div class="home">
    <!-- 导航栏 -->
    <nav-bar />

    <!-- 轮播图 -->
    <banner :images="bannerList" />

    <!-- 商品分类 -->
    <category-grid :categories="categoryList" />

    <!-- 商品推荐 -->
    <product-list :products="recommendProducts" />

    <!-- 页脚 -->
    <footer-bar />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Banner from '@/components/Banner'
import CategoryGrid from '@/components/CategoryGrid'
import ProductList from '@/components/ProductList'
import FooterBar from '@/components/FooterBar'

export default {
  components: { NavBar, Banner, CategoryGrid, ProductList, FooterBar },
  data() {
    return {
      bannerList: [],
      categoryList: [],
      recommendProducts: []
    }
  },
  async created() {
    await this.fetchHomeData()
  },
  methods: {
    async fetchHomeData() {
      try {
        const [banners, categories, products] = await Promise.all([
          axios.get('/api/banners'),
          axios.get('/api/categories'),
          axios.get('/api/products/recommend')
        ])
        this.bannerList = banners.data
        this.categoryList = categories.data
        this.recommendProducts = products.data
      } catch (error) {
        console.error('数据加载失败', error)
      }
    }
  }
}
</script>

<style scoped>
.home {
  padding-bottom: 50px;
}
</style>

关键组件实现

轮播图组件 (Banner.vue)：


<template>
<el-carousel indicator-position="outside">
 <el-carousel-item v-for="(item, index) in images" :key="index">
   <img :src="item.imageUrl" class="banner-img">
 </el-carousel-item>
</el-carousel>
</template>

export default { props: { images: { type: Array, default: () => [] } } } .banner-img { width: 100%; height: 300px; object-fit: cover; } ```

商品列表组件 (ProductList.vue)：


<template>
<div class="product-list">
 <h3>热门推荐</h3>
 <div class="products">
   <div v-for="product in products" :key="product.id" class="product-item">
     <img :src="product.cover" class="product-cover">
     <div class="product-info">
       <div class="title">{{ product.name }}</div>
       <div class="price">¥{{ product.price }}</div>
     </div>
   </div>
 </div>
</div>
</template>

export default { props: { products: { type: Array, default: () => [] } } } .products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .product-item { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .product-cover { width: 100%; height: 160px; object-fit: cover; } .product-info { padding: 10px; } .price { color: #ff6700; font-weight: bold; } ```

数据请求封装

在 src/api/index.js 中封装 API 请求：

vue商城首页实现

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://your-api-domain.com'
})

export const getBanners = () => instance.get('/banners')
export const getCategories = () => instance.get('/categories')
export const getRecommendProducts = () => instance.get('/products/recommend')

响应式布局处理

在 src/App.vue 中添加全局样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #333;
}

优化与扩展

添加懒加载提升性能：


// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('@/assets/loading.gif')
})

// 组件中使用

```

实现无限滚动加载更多商品：

// ProductList.vue
export default {
data() {
 return {
   page: 1,
   loading: false
 }
},
methods: {
 async loadMore() {
   if (this.loading) return
   this.loading = true
   this.page++
   const res = await getProducts({ page: this.page })
   this.products = [...this.products, ...res.data]
   this.loading = false
 }
},
mounted() {
 window.addEventListener('scroll', () => {
   if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
     this.loadMore()
   }
 })
}
}

注意事项

确保 API 接口跨域问题已解决（配置代理或后端允许跨域）
生产环境需配置环境变量管理 API 地址
重要交互需添加加载状态和错误处理
移动端需添加 viewport meta 标签

标签: 首页商城

分享给朋友：

vue商城首页实现