Vue 2 电商网页设计实战：从零搭建一个简洁的商品展示页面前端新手必看！一步步实现京东风格商品排行榜页面 Vue 实战案例：如何创建一个动态的商品展示和频道广场 html+css+Vue 商品展示

效果图

在这里插入图片描述

博客教程：使用 Vue 2 构建一个简洁的京东风格商品展示页面

在本教程中，我们将学习如何使用 Vue 2 创建一个带有商品排行榜和频道广场的简洁页面。我们会从零开始构建 HTML 结构、CSS 样式和 Vue 逻辑，适合新手学习 Vue 和网页设计的基本知识。

1. 项目简介

本项目模仿京东的商品展示页面，包括“超级排行榜”和“频道广场”两大模块。我们会使用 Vue 的动态渲染功能，使得页面更易于维护和扩展，同时借助一些 CSS 样式提升页面的美观度。

2. 环境准备

确保您的开发环境中已经安装了以下内容：

Vue 2：本项目基于 Vue 2 实现，可以通过 CDN 引入。
文本编辑器：推荐使用 VSCode 或 Sublime Text。

在 HTML 文件中引入 Vue：

<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>

3. 项目结构与布局

首先，我们创建一个 HTML 文件并编写基本的页面结构。以下是初始的 HTML 和基本的 CSS 样式，创建了一个 #app 容器作为 Vue 挂载点，设置页面宽度并居中显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>京选商品展示页面 - Vue 2 示例</title>
<style>
  * {
      
       box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
  body {
      
       background-color: #f5f5f5; display: flex; justify-content: center; padding: 20px; }
  #app {
      
       width: 100%; max-width: 1200px; background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
</style>
</head>
<body>
<div id="app">
  <!-- 内容将由 Vue 渲染 -->
</div>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</body>
</html>

4. 实现超级排行榜

在 #app 中创建一个超级排行榜模块。我们将通过 Vue 数据绑定，将商品信息动态渲染在排行榜中。

HTML 部分

添加一个 section 元素用于存放排行榜的内容，其中左侧为固定的“超级排行榜”介绍，右侧为商品列表。

<div class="section ranking">
  <div class="sidebar">
    <h2>超级排行榜</h2>
    <p>你的最爱，榜上有名</p>
  </div>
  <div class="products">
    <div v-for="(product, index) in products" :key="index" class="product-card">
      <img :src="product.image" :alt="product.name">
      <p>{
   
   { index + 1 }}. {
   
   { product.name }}</p>
      <p class="price">¥{
   
   { product.price }}</p>
    </div>
  </div>
</div>

CSS 部分

定义超级排行榜的样式，包括侧边栏 .sidebar 和商品卡片 .product-card 样式。

.ranking {
    
     display: flex; align-items: flex-start; }
.sidebar {
    
     background-color: #ff4d4f; color: #fff; padding: 20px; border-radius: 8px; text-align: center; margin-right: 20px; flex: 1; }
.products {
    
     display: flex; gap: 15px; flex: 4; }
.product-card {
    
     background-color: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 15px; text-align: center; width: 150px; }
.product-card img {
    
     width: 100%; border-radius: 8px; margin-bottom: 10px; }
.price {
    
     color: #e02d2d; font-weight: bold; }

5. 构建频道广场

接下来，我们添加频道广场模块，用来展示不同的分类频道。

HTML 部分

在 #app 中创建一个新的 section，使用 Vue 的 v-for 渲染每个频道。

<div class="section">
  <h2>频道广场</h2>
  <div class="channels">
    <div v-for="(channel, index) in channels" :key="index" class="channel-card">
      <h3>{
   
   { channel.title }}</h3>
      <p>{
   
   { channel.description }}</p>
      <img :src="channel.image" :alt="channel.title">
    </div>
  </div>
</div>

CSS 部分

定义频道广场和频道卡片 .channel-card 的样式。

.channels {
    
     display: flex; flex-wrap: wrap; gap: 15px; }
.channel-card {
    
     flex: 1; min-width: 200px; background-color: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 20px; text-align: center; }
.channel-card img {
    
     width: 80%; border-radius: 8px; margin-bottom: 10px; }

6. Vue 数据绑定

接下来，我们在 <script> 中定义 Vue 实例，并初始化数据 products 和 channels，实现动态内容渲染。

<script>
new Vue({
      
      
  el: '#app',
  data: {
      
      
    products: [
      {
      
       name: '联想拯救者刀锋9000K', price: '29998.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '小米13 Pro', price: '6299.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '公牛英标旅行电源转换器', price: '38.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: 'ROG枪神7 Plus', price: '20999.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '稳健医用外科口罩', price: '15.90', image: 'https://via.placeholder.com/150' }
    ],
    channels: [
      {
      
       title: '优选好店', description: '万千品类 大牌云集', image: 'https://via.placeholder.com/100' },
      {
      
       title: '新品首发', description: '京东小魔方 精选好物', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东量贩店', description: '囤生活好物', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东京造', description: '京东自有品牌', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东服饰', description: '时尚潮流 温暖速递', image: 'https://via.placeholder.com/100' },
      {
      
       title: '电脑数码', description: '信得过低价', image: 'https://via.placeholder.com/100' }
    ]
  }
});
</script>

7. 代码解释

HTML结构：将页面分成两个主要部分，分别用于超级排行榜和频道广场。
CSS样式：使用 Flexbox 布局和基本的盒模型设置来控制页面布局。
Vue 实例：通过 Vue 数据绑定使得页面数据可以动态渲染，并实现了样式和布局的分离。

8. 完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>京选商品展示页面 - Vue 2 示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
  * {
      
      
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  body {
      
      
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  #app {
      
      
    width: 100%;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .section {
      
      
    margin-bottom: 30px;
  }
  .section h2 {
      
      
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
  }
  .ranking {
      
      
    display: flex;
    align-items: flex-start;
  }
  .ranking .sidebar {
      
      
    background-color: #ff4d4f;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-right: 20px;
    flex: 1;
  }
  .ranking .products {
      
      
    display: flex;
    gap: 15px;
    flex: 4;
  }
  .product-card {
      
      
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    width: 150px;
  }
  .product-card img {
      
      
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .product-card .price {
      
      
    color: #e02d2d;
    font-weight: bold;
  }
  .channels {
      
      
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .channel-card {
      
      
    flex: 1;
    min-width: 200px;
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
  }
  .channel-card img {
      
      
    width: 80%;
    border-radius: 8px;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
<div id="app">
  <!-- 超级排行榜 Section -->
  <div class="section ranking">
    <div class="sidebar">
      <h2>超级排行榜</h2>
      <p>你的最爱，榜上有名</p>
    </div>
    <div class="products">
      <div v-for="(product, index) in products" :key="index" class="product-card">
        <img :src="product.image" :alt="product.name">
        <p>{
   
   { index + 1 }}. {
   
   { product.name }}</p>
        <p class="price">¥{
   
   { product.price }}</p>
      </div>
    </div>
  </div>

  <!-- 频道广场 Section -->
  <div class="section">
    <h2>频道广场</h2>
    <div class="channels">
      <div v-for="(channel, index) in channels" :key="index" class="channel-card">
        <h3>{
   
   { channel.title }}</h3>
        <p>{
   
   { channel.description }}</p>
        <img :src="channel.image" :alt="channel.title">
      </div>
    </div>
  </div>
</div>

<script>
new Vue({
      
      
  el: '#app',
  data: {
      
      
    products: [
      {
      
       name: '联想拯救者刀锋9000K', price: '29998.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '小米13 Pro', price: '6299.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '公牛英标旅行电源转换器', price: '38.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: 'ROG枪神7 Plus', price: '20999.00', image: 'https://via.placeholder.com/150' },
      {
      
       name: '稳健医用外科口罩', price: '15.90', image: 'https://via.placeholder.com/150' }
    ],
    channels: [
      {
      
       title: '优选好店', description: '万千品类 大牌云集', image: 'https://via.placeholder.com/100' },
      {
      
       title: '新品首发', description: '京东小魔方 精选好物', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东量贩店', description: '囤生活好物', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东京造', description: '京东自有品牌', image: 'https://via.placeholder.com/100' },
      {
      
       title: '京东服饰', description: '时尚潮流 温暖速递', image: 'https://via.placeholder.com/100' },
      {
      
       title: '电脑数码', description: '信得过低价', image: 'https://via.placeholder.com/100' }
    ]
  }
});
</script>
</body>
</html>

9. 总结

通过本教程，您已经学习了如何使用 Vue 2 创建一个静态商品展示页面。我们使用了 Vue 的数据绑定功能，使页面内容更具灵活性。同时，通过 CSS 样式美化页面，让页面效果更加接近实际的京东风格商品展示。