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

最近在学习 vue 框架 就写了一个 电商商城的前端静态网站。 使用的技术 本模板使用了 Vue2 作为前端框架，并集成了 Element UI 组件库，提供了响应式的用户界面和丰富的组件，帮助开发者快速搭建功能齐全的电商商城页面。通过这个模板，用户能够掌握 Vue2 的基本用法和如何使用 Element UI 创建交互式页面。 适合人群 这个模板适合刚开始学习前端的开发者，尤其是初学者和前端编程练习者。通过实现这些基础功能，用户可以锻炼自己在 HTML、CSS、JavaScript 以及 Vue.js 开发中的实际应用能力，为后续更复杂的项目奠定基础。

网站内容 该模板包括以下核心页面： 首页：展示热门商品、活动信息和分类导航。 商品搜索页：用户可以搜索和筛选商品。

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

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

结算页：展示用户选择的商品和结算信息，支持填写地址、支付方式等。 项目结构： 代码内容过多 ，在文章里就简单的分享一些源码。 全部代码获取： oop /home/Index/projectInfo?goodsId=49&typeParam=2 代码分享

<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>