使用vue2 脚手架 结合 Element UI 写一个电商商城前端静态网站模板-前端项目练习

最近在学习 vue 框架 就写了一个 电商商城的前端静态网站。

使用的技术

本模板使用了 Vue2 作为前端框架，并集成了 Element UI 组件库，提供了响应式的用户界面和丰富的组件，帮助开发者快速搭建功能齐全的电商商城页面。通过这个模板，用户能够掌握 Vue2 的基本用法和如何使用 Element UI 创建交互式页面。

适合人群

这个模板适合刚开始学习前端的开发者，尤其是初学者和前端编程练习者。通过实现这些基础功能，用户可以锻炼自己在 HTML、CSS、JavaScript 以及 Vue.js 开发中的实际应用能力，为后续更复杂的项目奠定基础。

网站内容

该模板包括以下核心页面：

首页：

展示热门商品、活动信息和分类导航。

商品搜索页：

用户可以搜索和筛选商品。

购物车：

用户可以查看已添加的商品并进行删除或修改数量。

个人中心页：

显示用户的个人信息、订单历史等。

结算页：

展示用户选择的商品和结算信息，支持填写地址、支付方式等。

项目结构：

代码内容过多 ，在文章里就简单的分享一些源码。 代码分享

<template>
  <div class="home">
    <div class="container">
      <div class="banner-section">
        <div class="category-list">
          <ul>
            <li v-for="category in categories" :key="category.id" @click="handleCategoryClick(category)">
              <el-button type="text">{{ category.name }}</el-button>
              <div class="sub-categories" v-if="category.children">
                <div v-for="sub in category.children" 
                     :key="sub.id" 
                     class="sub-category"
                     @click.stop="handleSubCategoryClick(sub)">
                  {{ sub.name }}
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="carousel">
          <el-carousel height="480px">
            <el-carousel-item v-for="item in carouselItems" :key="item.id">
              <div class="carousel-content" :style="{ backgroundColor: item.bgColor }">
                {{ item.text }}
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="hot-products section">
        <h2>热卖专区</h2>
        <div class="product-grid">
          <div v-for="product in hotProducts" :key="product.id" class="product-item" @click="goToDetail(product.id)">
            <div class="product-image" :style="{ backgroundColor: product.bgColor }">
              {{ product.name }}图
            </div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-desc">{{ product.desc }}</div>
              <div class="product-shop">{{ product.shop }}</div>
              <div class="product-bottom">
                <div class="price-sales">
                  <span class="product-price">¥{{ product.price }}</span>
                  <span class="product-sales">月销 {{ product.sales }}+</span>
                </div>
                <el-button 
                  class="add-to-cart-btn"
                  type="primary"
                  size="small"
                  icon="el-icon-shopping-cart-2"
                  circle
                  @click.stop="goToCart(product)">
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="recommended section">
        <h2>猜你喜欢</h2>
        <div class="product-grid">
          <div v-for="product in recommendedProducts" 
               :key="product.id" 
               class="product-item"
               @click="goToDetail(product.id)">
            <div class="product-image" :style="{ backgroundColor: product.bgColor }">
              {{ product.name }}图
            </div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-desc">{{ product.desc }}</div>
              <div class="product-shop">{{ product.shop }}</div>
              <div class="product-bottom">
                <div class="price-sales">
                  <span class="product-price">¥{{ product.price }}</span>
                  <span class="product-sales">月销 {{ product.sales }}+</span>
                </div>
                <el-button 
                  class="add-to-cart-btn"
                  type="primary"
                  size="small"
                  icon="el-icon-shopping-cart-2"
                  circle
                  @click.stop="goToCart(product)">
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Footer'

export default {
  name: 'Home',
  components: {
    Footer
  },
  data() {
    return {
      categories: [
        {
          id: 1,
          name: '手机数码',
          children: [
            { id: 11, name: '手机', parentName: '手机数码' },
            { id: 12, name: '平板', parentName: '手机数码' },
            { id: 13, name: '笔记本', parentName: '手机数码' },
            { id: 14, name: '智能穿戴', parentName: '手机数码' }
          ]
        },
        { id: 2, name: '家用电器' },
        { id: 3, name: '生活用品' },
        { id: 4, name: '服装鞋帽' },
        { id: 5, name: '美妆护肤' },
        { id: 6, name: '图书文具' },
      ],
      carouselItems: [
        { id: 1, bgColor: '#409EFF', text: '年中大促活动进行中' },
        { id: 2, bgColor: '#67C23A', text: '新品首发专场' },
        { id: 3, bgColor: '#E6A23C', text: '限时特惠专区' }
      ],
      hotProducts: Array(8).fill().map((_, index) => ({
        id: index + 1,
        name: ['手机', '电视', '洗衣机', '冰箱'][index % 4],
        desc: '商品简短描述信息',
        shop: '官方旗舰店',
        price: Math.floor(Math.random() * 5000 + 1000),
        sales: Math.floor(Math.random() * 1000),
        bgColor: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'][index % 4]
      })),
      recommendedProducts: Array(8).fill().map((_, index) => ({
        id: index + 1,
        name: ['耳机', '手表', '平板', '相机'][index % 4],
        desc: '商品简短描述信息',
        shop: '品牌专卖店',
        price: Math.floor(Math.random() * 3000 + 500),
        sales: Math.floor(Math.random() * 1000),
        bgColor: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'][index % 4]
      }))
    }
  },
  methods: {
    handleCategoryClick(category) {
      this.$router.push({
        path: '/products',
        query: {
          categoryId: category.id,
          categoryName: category.name
        }
      })
    },
    handleSubCategoryClick(subCategory) {
      this.$router.push({
        path: '/products',
        query: {
          categoryId: subCategory.id,
          categoryName: subCategory.name,
          parentName: subCategory.parentName
        }
      })
    },
    goToCart(product) {
      this.$message.success(`已将 ${product.name} 加入购物车`)
      this.$router.push('/cart')
    },
    goToDetail(id) {
      this.$router.push(`/product/${id}`)
    }
  }
}
</script>

<style scoped>
.home {
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.banner-section {
  display: flex;
  margin-bottom: 30px;
  height: 480px;
}

.category-list {
  width: 200px;
  background: #f5f5f5;
  height: 100%;
}

.category-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.category-list li {
  padding: 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.category-list li:hover .sub-categories {
  display: block;
}

.sub-categories {
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  width: 200px;
  border: 1px solid #eee;
  border-left: none;
  display: none;
  padding: 10px 0;
}

.sub-category {
  padding: 8px 20px;
  cursor: pointer;
}

.sub-category:hover {
  color: #409EFF;
  background: #f5f7fa;
}

.carousel {
  flex: 1;
  margin-left: 20px;
}

.carousel-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.section {
  margin-bottom: 30px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.product-item {
  border: 1px solid #eee;
  padding: 10px;
  transition: all 0.3s;
}

.product-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.product-image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 10px;
  position: relative;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.product-shop {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price-sales {
  display: flex;
  flex-direction: column;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.product-sales {
  font-size: 12px;
  color: #999;
}

.add-to-cart-btn {
  opacity: 0;
  transition: opacity 0.3s;
}

.product-item:hover .add-to-cart-btn {
  opacity: 1;
}
</style> 

演示地址有兴趣的小伙伴可以去看下
test.wwwoop.com/?s=mall-sho...
全部源码： 正下方