首页 > 分享 > Vue实战攻略：打造高效商品展示页面，告别代码烦恼！

Vue实战攻略：打造高效商品展示页面，告别代码烦恼！

花匠小妙招
2026-01-03 18:08

在电商网站和在线零售平台中，商品展示页面是吸引用户和促进销售的关键部分。使用Vue.js构建高效的商品展示页面不仅可以提升用户体验，还能降低开发难度。本文将详细介绍如何利用Vue.js打造一个功能丰富、响应迅速的商品展示页面。

1. 项目简介

本教程旨在通过Vue.js构建一个商品展示页面，该页面将包括以下功能：

商品列表展示商品搜索与筛选商品详情展示图片轮播用户评价

通过这些功能，我们可以打造一个既美观又实用的商品展示页面。

2. 环境准备

在开始之前，请确保您的开发环境中已经安装了以下内容：

Node.js和npm Vue CLI Webpack Babel

您可以通过以下命令安装Vue CLI：

npm install -g @vue/cli

3. 项目结构与布局

创建一个新的Vue项目：

vue create product-display

进入项目目录：

cd product-display

项目结构如下：

4. 实现商品列表展示

在components/ProductList.vue中，我们将创建一个商品列表组件：

<template> <div class="product-list"> <product-item v-for="product in products" :key="product.id" :product="product" ></product-item> </div> </template> <script> import ProductItem from './ProductItem.vue'; export default { components: { ProductItem }, data() { return { products: [ // 商品数据 ] }; } }; </script> <style scoped> .product-list { display: flex; flex-wrap: wrap; justify-content: space-around; } </style>

在components/ProductItem.vue中，我们将创建一个商品项组件：

<template> <div class="product-item"> <img :src="product.image" :alt="product.name"> <h3>{{ product.name }}</h3> <p>{{ product.description }}</p> <p>{{ product.price }}</p> </div> </template> <script> export default { props: { product: Object } }; </script> <style scoped> .product-item { width: 200px; margin: 10px; } </style>

5. 实现商品搜索与筛选

在components/SearchFilter.vue中，我们将创建一个搜索和筛选组件：

<template> <div class="search-filter"> <input type="text" v-model="searchQuery" placeholder="搜索商品..."> <select v-model="selectedCategory"> <option value="">所有类别</option> <option v-for="category in categories" :key="category.id" :value="category.id"> {{ category.name }} </option> </select> </div> </template> <script> export default { data() { return { searchQuery: '', selectedCategory: '' }; } }; </script> <style scoped> .search-filter { margin-bottom: 20px; } </style>

6. 实现商品详情展示

在components/ProductDetail.vue中，我们将创建一个商品详情组件：

<template> <div class="product-detail"> <img :src="product.image" :alt="product.name"> <h3>{{ product.name }}</h3> <p>{{ product.description }}</p> <p>{{ product.price }}</p> <carousel :images="product.images"></carousel> <user-review :reviews="product.reviews"></user-review> </div> </template> <script> import Carousel from './Carousel.vue'; import UserReview from './UserReview.vue'; export default { components: { Carousel, UserReview }, props: { product: Object } }; </script> <style scoped> .product-detail { margin-bottom: 20px; } </style>

在components/Carousel.vue中，我们将创建一个图片轮播组件：

<template> <div class="carousel"> <img v-for="(image, index) in images" :key="index" :src="image" :alt="product.name" @click="currentImage = index" /> <span>{{ currentImage + 1 }} / {{ images.length }}</span> </div> </template> <script> export default { props: { images: Array }, data() { return { currentImage: 0 }; } }; </script> <style scoped> .carousel { position: relative; display: inline-block; } .carousel img { width: 100%; cursor: pointer; } .carousel span { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.5); color: white; padding: 5px 10px; } </style>

在components/UserReview.vue中，我们将创建一个用户评价组件：

<template> <div class="user-review"> <h4>用户评价</h4> <ul> <li v-for="review in reviews" :key="review.id"> <p>{{ review.content }}</p> <p>{{ review.author }}</p> </li> </ul> </div> </template> <script> export default { props: { reviews: Array } }; </script> <style scoped> .user-review { margin-bottom: 20px; } .user-review ul { list-style-type: none; padding: 0; } .user-review li { margin-bottom: 10px; } </style>

7. 整体样式美化

在src/assets/styles/目录下，创建一个全局样式文件global.css：

/* global.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f7f8fc; }

在main.js中引入全局样式：

import Vue from 'vue'; import App from './App.vue'; import './assets/styles/global.css'; Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app');