新手必学：用 Vue.js 和 CSS 打造响应式商品推荐页面」「Vue.js 商品展示页面开发：从零开始到实现响应式布局」「Vue.js + CSS 项目实战：实现响应式商品推荐页面」

效果图

在这里插入图片描述

1. 项目介绍

这个项目是一个简单的商品推荐页面，包含多个商品卡片。每张卡片展示商品的名称和价格，图片部分用灰色色块代替。页面具有响应式布局，能自动适应不同的屏幕宽度。

2. 项目预览

我们会实现如下效果：

商品卡片以栅格布局展示，每行自动适应适当数量的卡片。
每个商品卡片展示商品名称、价格和一个图片色块。
页面在不同设备上能够自动调整布局，达到良好的响应式体验。

3. 步骤一：构建基本的 HTML 和 CSS 结构

首先，我们需要创建一个基本的 HTML 文件，包含页面的结构和样式。以下是 HTML 和 CSS 代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>为你推荐 - Vue 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
  body {
      
      
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  #app {
      
      
    width: 100%;
    max-width: 1200px;
    padding: 20px;
  }
  .title {
      
      
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  .product-list {
      
      
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
  .product-item {
      
      
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .product-image {
      
      
    width: 100%;
    height: 150px;
    background-color: #d8d8d8;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .product-title {
      
      
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
  }
  .product-price {
      
      
    font-size: 18px;
    color: #e60012;
    font-weight: bold;
    margin-top: 10px;
  }
</style>
</head>
<body>
<div id="app">
  <div class="title">为你推荐</div>
  <div class="product-list">
    <!-- 商品卡片将在此处动态生成 -->
  </div>
</div>
</body>
</html>

在这段代码中：

使用了 grid 布局的 product-list 容器，它可以自动调整每行显示的卡片数量。
product-item 是单个商品卡片的容器，里面包含图片、商品标题和价格。

4. 步骤二：使用 Vue.js 动态显示商品数据

接下来，我们使用 Vue.js 来动态生成商品列表。首先在 HTML 文件中加入 Vue 实例，数据部分包含一个 products 数组，每个对象表示一个商品。

将以下代码添加到 <script> 标签中：

<script>
new Vue({
      
      
  el: '#app',
  data: {
      
      
    products: [
      {
      
       title: '德尔玛吸尘器', price: 999.00 },
      {
      
       title: '九阳炒菜机', price: 649.00 },
      {
      
       title: '尔木萄化妆刷', price: 89.00 },
      {
      
       title: '东菱面包机', price: 469.00 },
      {
      
       title: '匹克健身手套', price: 39.00 },
      {
      
       title: '小熊咖啡机', price: 97.00 },
      {
      
       title: '双超甩脂机', price: 398.00 },
      {
      
       title: 'babycare婴儿钢琴', price: 265.00 },
      {
      
       title: '小熊电热饭盒', price: 109.00 },
      {
      
       title: '精准扭力扳手', price: 31.00 }
    ]
  }
});
</script>

该实例挂载到 #app 元素，数据部分的 products 数组包含了多个商品，每个商品有 title 和 price 两个属性。

在 HTML 中，将商品卡片的生成部分更新为 Vue 语法，通过 v-for 指令生成每个商品：

<div class="product-list">
  <div v-for="(product, index) in products" :key="index" class="product-item">
    <div class="product-image"></div>
    <div class="product-title">{
   
   { product.title }}</div>
    <div class="product-price">￥{
   
   { product.price.toFixed(2) }}</div>
  </div>
</div>

5. 步骤三：实现响应式布局

为了实现响应式设计，我们使用 CSS Grid 布局的 auto-fill 和 minmax 功能。在 .product-list 样式中，grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 会根据屏幕宽度自动调整列数。

6. 代码详解

HTML结构：页面包含一个 app 根元素，一个标题，以及商品列表的容器 product-list。
CSS样式：
- product-list 使用 CSS grid 布局，实现响应式。
- product-item 使用背景色代替图片，并设置文字颜色和大小。
JavaScript：
- Vue 实例中，products 数组用于生成商品卡片，每个商品对象包含 title 和 price。

7. 完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>为你推荐 - Vue 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
  body {
      
      
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  #app {
      
      
    width: 100%;
    max-width: 1200px;
    padding: 20px;
  }
  .title {
      
      
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  .product-list {
      
      
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
  .product-item {
      
      
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .product-image {
      
      
    width: 100%;
    height: 150px;
    background-color: #d8d8d8;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .product-title {
      
      
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
  }
  .product-price {
      
      
    font-size: 18px;
    color: #e60012;
    font-weight: bold;
    margin-top: 10px;
  }
</style>
</head>
<body>
<div id="app">
  <div class="title">为你推荐</div>
  <div class="product-list">
    <div v-for="(product, index) in products" :key="index" class="product-item">
      <div class="product-image"></div>
      <div class="product-title">{
   
   { product.title }}</div>
      <div class="product-price">￥{
   
   { product.price.toFixed(2) }}</div>
    </div>
  </div>
</div>

<script>
new Vue({
      
      
  el: '#app',
  data: {
      
      
    products: [
      {
      
       title: '德尔玛吸尘器', price: 999.00 },
      {
      
       title: '九阳炒菜机', price: 649.00 },
      {
      
       title: '尔木萄化妆刷', price: 89.00 },
      {
      
       title: '东菱面包机', price: 469.00 },
      {
      
       title: '匹克健身手套', price: 39.00 },
      {
      
       title: '小熊咖啡机', price: 97.00 },
      {
      
       title: '双超甩脂机', price: 398.00 },
      {
      
       title: 'babycare婴儿钢琴', price: 265.00 },
      {
      
       title: '小熊电热饭盒', price: 109.00 },
      {
      
       title: '精准扭力扳手', price: 31.00 }
    ]
  }
});
</script>
</body>
</html>

8. 总结与拓展

我们已经完成了一个简单的 Vue.js 商品推荐页面，具备了响应式布局。如果需要进一步增强，可以考虑：

添加商品详情的点击事件。
实现商品排序功能，如价格从低到高排序。
与后端数据对接，实现动态加载。

通过本项目，你学会了如何使用 Vue 和 CSS 创建一个响应式布局，同时掌握了 Vue 的基本语法，非常适合新手学习和练习。