当前位置： 首页 > news >正文

vue+element纯手工完美模拟实现小米有品网站

news 2026/5/11 14:33:53

目录

一、预览

二、效果图对比

1.官方效果截图：

2.作者实现的demo效果图：

三、项目细节说明

1.项目结构、设计说明

3.详情、购物车等模拟数据交互

四、总结

一、预览

源码下载https://download.csdn.net/download/lucky_fang/92709349

小米有品官网：小米有品

本作品demo预览地址：点击预览

二、效果图对比

1.官方效果截图：

2.作者实现的demo效果图：

首页：

上新精选：

商品详情：

购物车：

商品搜索：

登录、注册：

三、项目细节说明

1.项目结构、设计说明

项目以vue项目创建，前端某些元素使用element，项目启动执行的命令为：

npm install
npm run dev（当然命令可以修改为npm run serve，没啥区别）
结构如下截图，项目已经集成和实现了需要请求后端接口的一切功能，所以无须花费精力去考虑前端如何去对接后端和接口，可以把一切精力放在实现前端界面设计上来。

这样不懂后端的伙伴也省心省力，接口请求只需按照模板去copy就好，无非就是get/post/delete/put等请求方式和参数传递的差别，当然不明白的可以细问作者。

项目结构还是分为：顶部+具体功能显示容器+底部，页面存放于src/page目录下，看目录命名就能明白其含义，具体功能页面在views目录下。

路由在router目录中，全局布局公用样式在styles，比如整个项目框架左右空间布局，最小宽度等。

路由权限也是很重要的一个功能，为permission.js，所有页面跳转都会经过其拦截，有人问，路由权限有什么用，好说，比如订单页面或个人中心页面吧，肯定是需要登录才能访问的，首页却是无需登录即可访问的，那么就可以在permission.js里面获取登录token，有token即表示已经登录，可以访问订单或个人中心页面，否则跳转登录页等。

项目数据已经分离出来，作为单独json文件单独存放，每个商品id唯一。

如图所示：

原始数据代码：

{ "goodsListNew-des":"注释-以下是：上新精选", "goodsListNew":[ { "id":1, "name":"小米13 Pro", "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质", "price":4999, "originalPrice":5999, "count":0, "img":"/img/product1.jpeg", "imgList":[ "/img/product1_1.jpg", "/img/product1_2.jpg", "/img/product1_3.jpg", "/img/product1_4.jpg" ], "detailImgList":[ "/img/product1_detail1.jpeg", "/img/product1_detail2.jpeg", "/img/product1_detail3.jpeg", "/img/product1_detail4.jpeg" ] }, { "id":2, "name":"Xiaomi 13", "title":"Xiaomi 13 黑色 8GB+128GB", "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器", "price":3999, "originalPrice":4999, "count":0, "img":"/img/product2.jpeg", "imgList":[ "/img/product2_1.jpg", "/img/product2_2.jpg", "/img/product2_3.jpg", "/img/product2_4.jpg" ], "detailImgList":[ "/img/product2_detail1.jpeg", "/img/product2_detail2.jpeg", "/img/product2_detail3.jpeg", "/img/product2_detail4.jpeg" ] }, { "id":3, "name":"Redmi Watch 3", "title":"Redmi Watch 3 典雅黑", "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话", "price":479, "originalPrice":579, "count":0, "img":"/img/product3.jpeg", "imgList":[ "/img/product3_1.jpg", "/img/product3_2.jpg", "/img/product3_3.jpg", "/img/product3_4.jpg" ], "detailImgList":[ "/img/product3_detail1.jpeg", "/img/product3_detail2.jpeg", "/img/product3_detail3.jpeg", "/img/product3_detail4.jpeg" ] }, { "id":4, "name":"智能门锁E10", "title":"Xiaomi智能门锁 E10 黑色", "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体", "price":799, "originalPrice":999, "count":0, "img":"/img/product4.jpeg", "imgList":[ "/img/product4_1.jpg", "/img/product4_2.jpg", "/img/product4_3.jpg", "/img/product4_4.jpg" ], "detailImgList":[ "/img/product4_detail1.jpeg", "/img/product4_detail2.jpeg", "/img/product4_detail3.jpeg", "/img/product4_detail4.jpeg" ] }, { "id":5, "name":"小米13 Pro", "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质", "price":4999, "originalPrice":5999, "count":0, "img":"/img/product1.jpeg", "imgList":[ "/img/product1_1.jpg", "/img/product1_2.jpg", "/img/product1_3.jpg", "/img/product1_4.jpg" ], "detailImgList":[ "/img/product1_detail1.jpeg", "/img/product1_detail2.jpeg", "/img/product1_detail3.jpeg", "/img/product1_detail4.jpeg" ] }, { "id":6, "name":"Xiaomi 13", "title":"Xiaomi 13 黑色 8GB+128GB", "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器", "price":3999, "originalPrice":4999, "count":0, "img":"/img/product2.jpeg", "imgList":[ "/img/product2_1.jpg", "/img/product2_2.jpg", "/img/product2_3.jpg", "/img/product2_4.jpg" ], "detailImgList":[ "/img/product2_detail1.jpeg", "/img/product2_detail2.jpeg", "/img/product2_detail3.jpeg", "/img/product2_detail4.jpeg" ] }, { "id":7, "name":"Redmi Watch 3", "title":"Redmi Watch 3 典雅黑", "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话", "price":479, "originalPrice":579, "count":0, "img":"/img/product3.jpeg", "imgList":[ "/img/product3_1.jpg", "/img/product3_2.jpg", "/img/product3_3.jpg", "/img/product3_4.jpg" ], "detailImgList":[ "/img/product3_detail1.jpeg", "/img/product3_detail2.jpeg", "/img/product3_detail3.jpeg", "/img/product3_detail4.jpeg" ] }, { "id":8, "name":"智能门锁E10", "title":"Xiaomi智能门锁 E10 黑色", "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体", "price":799, "originalPrice":999, "count":0, "img":"/img/product4.jpeg", "imgList":[ "/img/product4_1.jpg", "/img/product4_2.jpg", "/img/product4_3.jpg", "/img/product4_4.jpg" ], "detailImgList":[ "/img/product4_detail1.jpeg", "/img/product4_detail2.jpeg", "/img/product4_detail3.jpeg", "/img/product4_detail4.jpeg" ] } ], "goodsListKill-des":"注释-以下是：有品秒杀", "goodsListKill":[ { "id":1005, "name":"小米13 Pro", "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质", "price":4999, "originalPrice":5999, "count":0, "img":"/img/product1.jpeg", "imgList":[ "/img/product1_1.jpg", "/img/product1_2.jpg", "/img/product1_3.jpg", "/img/product1_4.jpg" ], "detailImgList":[ "/img/product1_detail1.jpeg", "/img/product1_detail2.jpeg", "/img/product1_detail3.jpeg", "/img/product1_detail4.jpeg" ] }, { "id":1006, "name":"Xiaomi 13", "title":"Xiaomi 13 黑色 8GB+128GB", "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器", "price":3999, "originalPrice":4999, "count":0, "img":"/img/product2.jpeg", "imgList":[ "/img/product2_1.jpg", "/img/product2_2.jpg", "/img/product2_3.jpg", "/img/product2_4.jpg" ], "detailImgList":[ "/img/product2_detail1.jpeg", "/img/product2_detail2.jpeg", "/img/product2_detail3.jpeg", "/img/product2_detail4.jpeg" ] }, { "id":1007, "name":"Redmi Watch 3", "title":"Redmi Watch 3 典雅黑", "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话", "price":479, "originalPrice":579, "count":0, "img":"/img/product3.jpeg", "imgList":[ "/img/product3_1.jpg", "/img/product3_2.jpg", "/img/product3_3.jpg", "/img/product3_4.jpg" ], "detailImgList":[ "/img/product3_detail1.jpeg", "/img/product3_detail2.jpeg", "/img/product3_detail3.jpeg", "/img/product3_detail4.jpeg" ] }, { "id":1008, "name":"智能门锁E10", "title":"Xiaomi智能门锁 E10 黑色", "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体", "price":799, "originalPrice":999, "count":0, "img":"/img/product4.jpeg", "imgList":[ "/img/product4_1.jpg", "/img/product4_2.jpg", "/img/product4_3.jpg", "/img/product4_4.jpg" ], "detailImgList":[ "/img/product4_detail1.jpeg", "/img/product4_detail2.jpeg", "/img/product4_detail3.jpeg", "/img/product4_detail4.jpeg" ] }, { "id":1009, "name":"小米13 Pro", "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质", "price":4999, "originalPrice":5999, "count":0, "img":"/img/product1.jpeg", "imgList":[ "/img/product1_1.jpg", "/img/product1_2.jpg", "/img/product1_3.jpg", "/img/product1_4.jpg" ], "detailImgList":[ "/img/product1_detail1.jpeg", "/img/product1_detail2.jpeg", "/img/product1_detail3.jpeg", "/img/product1_detail4.jpeg" ] }, { "id":1010, "name":"Xiaomi 13", "title":"Xiaomi 13 黑色 8GB+128GB", "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器", "price":3999, "originalPrice":4999, "count":0, "img":"/img/product2.jpeg", "imgList":[ "/img/product2_1.jpg", "/img/product2_2.jpg", "/img/product2_3.jpg", "/img/product2_4.jpg" ], "detailImgList":[ "/img/product2_detail1.jpeg", "/img/product2_detail2.jpeg", "/img/product2_detail3.jpeg", "/img/product2_detail4.jpeg" ] }, { "id":1011, "name":"Redmi Watch 3", "title":"Redmi Watch 3 典雅黑", "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话", "price":479, "originalPrice":579, "count":0, "img":"/img/product3.jpeg", "imgList":[ "/img/product3_1.jpg", "/img/product3_2.jpg", "/img/product3_3.jpg", "/img/product3_4.jpg" ], "detailImgList":[ "/img/product3_detail1.jpeg", "/img/product3_detail2.jpeg", "/img/product3_detail3.jpeg", "/img/product3_detail4.jpeg" ] }, { "id":1012, "name":"智能门锁E10", "title":"Xiaomi智能门锁 E10 黑色", "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体", "price":799, "originalPrice":999, "count":0, "img":"/img/product4.jpeg", "imgList":[ "/img/product4_1.jpg", "/img/product4_2.jpg", "/img/product4_3.jpg", "/img/product4_4.jpg" ], "detailImgList":[ "/img/product4_detail1.jpeg", "/img/product4_detail2.jpeg", "/img/product4_detail3.jpeg", "/img/product4_detail4.jpeg" ] } ] }

2.路由配置源码：

import Vue from 'vue' import Router from 'vue-router' import Layout from '@/page/index/index' Vue.use(Router) export default new Router({ routes: [ { path: '/index', component: Layout, children: [{ path: '', name: '主页', component: () => import( /* webpackChunkName: "views" */ '@/views/home/index') }] }, { path: '/', name: '主页', redirect: '/index' }, { path: '/newSelection', component: Layout, children: [{ path: '', name: '上新精选', component: () => import( /* webpackChunkName: "views" */ '@/views/new_selection/index') }] }, { path: '/goodsDetails', component: Layout, children: [{ path: '', name: '商品详情', component: () => import( /* webpackChunkName: "views" */ '@/views/product_detail/index') }] }, { path: '/myCar', component: Layout, children: [{ path: '', name: '我的购物车', component: () => import( /* webpackChunkName: "views" */ '@/views/car/index') }] }, { path: '/login', name: '登录页', component: () => import( /* webpackChunkName: "page" */ '@/page/login/index'), }, ] })

3.详情、购物车等模拟数据交互

购物车 脚本事件处理源码：

<script> import product from "@/data/product.json"; import {getStore,setStore,removeStore} from "@/utils/store.js"; export default { data() { return { data:[],//购物车商品数据 total:0,//总计数量 sum:0,//总计金额 }; }, mounted() { this.getCarData(); }, methods: { getCarData(){//获取购物车商品数据 //缓存获取 let carList = getStore({name:'carList'}); if(!carList){ carList = []; } this.data = []; //获取商品 carList.forEach((item1,index)=>{ product.goodsListNew.forEach(item2=>{ if(item1.goodsId === item2.id){ item2.count = item1.count; this.data.push(item2); } }) //有品秒杀-循环 product.goodsListKill.forEach(item2=>{ if(item1.goodsId === item2.id){ item2.count = item1.count; this.data.push(item2); } }) }) this.totalFun(); }, goHome(){//首页 this.$router.push({path:'/'}) }, goGoodsDetails(item){//跳转商品详情 //浏览器缓存 商品详情id setStore({name:'goodsId',content: item.id}); this.$router.push({path:'/goodsDetails'}); }, addNum(item){//数量+ item.count++; //缓存获取数据 let carList = getStore({name:'carList'}); if(!carList){ carList = []; } carList.forEach(item2=>{ if(item2.goodsId === item.id){ item2.count = item.count; //存到缓存 setStore({name:'carList',content: carList}); } }) this.totalFun(); }, subNum(item){//数量- if(item.count > 1){ item.count--; //缓存获取数据 let carList = getStore({name:'carList'}); if(!carList){ carList = []; } carList.forEach(item2=>{ if(item2.goodsId === item.id){ item2.count = item.count; //存到缓存 setStore({name:'carList',content: carList}); } }) this.totalFun(); } }, totalFun(){//统计 计算 this.sum = 0; this.total = 0; this.data.forEach(item=>{ this.sum += item.price*item.count; this.total += item.count; }); }, delSingle(item){//删除 this.$confirm("确定删除？", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { //缓存获取数据 let carList = getStore({name:'carList'}); if(!carList){ carList = []; } carList.forEach((item2,index2)=>{ if(item2.goodsId === item.id){ //删除 carList.splice(index2,1); //存到缓存 setStore({name:'carList',content: carList}); } }) }) .then(() => { this.getCarData(); this.$message({ type: 'success', message: '删除成功' }); }) }, delCart(){//清空购物车 this.$confirm("确定清空购物车？", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { removeStore({name:'carList'}); }) .then(() => { this.getCarData(); this.$message({ type: 'success', message: '已清空购物车' }); }) }, toPay(){//去结算 console.info('点击去结算'); } } }; </script>

四、总结

后续不定期将不断完善和增加功能页面，敬请期待。

关注作者，及时了解更多好项目！

作者主页也有更多好项目分享！

获取源码或如需帮助，可通过博客后面名片+作者即可！

其他作品集合：

  1. 《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》
  2. 《vue实现功能完整的购物商城，商品零食、电商通用商城》
  3. 《vue+element实现蔬菜、水果、电商商城》
  4. 《vue+element简单实现电商商城网站，模仿小米电商商城》
  5. 《vue实现美观大方的动漫、cos、帖子类型网站》
  6. 《vue实现好看的相册、图片网站》
  7. 《高度仿PC版《微信读书》，好看的小说、读书网站》
  8. 《vue+element实现非常好看的鲜花网站商城，页面完整，样式美观》
  9. 《vue+elementui+springboot前后端分离实现通用商城管理后台》
  10. 《微信小程序日记、微信小程序个人空间、个人日记》
  11. 《vue+element模仿腾讯视频电影网站》
  12. 《vue+element高度仿照QQ音乐，完美实现PC端QQ音乐》
  13. 《vue+element详细完整实现个人博客、个人网站》
  14. 《vue+elementui+springboot前后端分离实现学校帖子网站，学校大作业》
  15. 《vue+elementui实现U袋网-完整版》
  16. 《vue+element+electron仿微信实现》
  17. 《vue+element模仿电商商城，前后端分离实现，下单微信扫码支付》
  18. 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
  19. 《微信小程序仿唯聚时代，微信小程序商城》
  20. 《jquery+bootstrap完整丰富样式开发框架源码，各种现成样式简单易用》
  21. 《html+css响应式旅游主题网站模板，旅游网站，企业文化新闻类网站》
  22. 《css+html各种动态、动画、3D相册等7件套》
  23. 《仿华为电商商城，官网，华为超级新品日demo,大屏霸气且简洁》
  24. 《vue+element简单实现商城网站首页，模仿电商商城》
  25. 《vue+elementui实现非常好看的博客、网站首页，网站模板》
  26. 《elementui+vue实现经典管理系统布局框架，拿来即用》
  27. 《简系统登录页模板html+vue+elementui》
  28. 《vue+elementui完美实现博客、网站、个人网站，高仿“张凯博客”》
  29. 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
  30. 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
  31. 《后端使用springboot+maven+shiro+mybatis+mysql，前端使用H-ui.admin_v3.1.3.1，快速实现管理后台功能》
  32. 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
  33. 《html+css实现好友列表，类似QQ群聊成员列表》
http://www.jsqmd.com/news/446903/

相关文章：

  • Springboot整合RabbitMQ
  • uview plus u-calendar日历设置部分日期不可选择disabled
  • 系统不出事，才是运维的最高境界：聊聊如何打造“零故障运维系统”
  • electron 开发轻量级本地数据存储桌面端应用（简洁版）
  • 【100%通过率】华为od统一考试B卷【流水线调度 / 自动化维修流水线】JavaScript 实现
  • Web前端之Css网格布居中的动画、VSC中Scss自动编译成Css、通过子元素改变父元素的样式值、安装和配置Sass插件、样式特殊单位、hover、child、grid、nth、fr
  • minio 安装部署、主从、卸载、基础使用
  • 数据库同步软件,PanguSync霸气!!!
  • AQS原理
  • 写文章，得有点儿原则
  • Web前端之UniApp低功耗蓝牙一键开门、数组匹配数组、多对多查找、开锁
  • Labelme安装以及qt.qpa.plugin: Could not load the Qt platform plugin “xcb“ in ““ even though it was f问题解决
  • CAS原理
  • 微信小程序TS+SASS使用vant导致体验版白屏SystemError (jsEnginScriptError) X(...).bem is not a function
  • 【节点】[Fog节点]原理解析与实际应用
  • 酷炫 css 按钮 边框霓虹
  • 软件设计师考试中需要掌握的一些常用算法，基于C++实现
  • Mybatis的延迟加载
  • 教程 | 如何动用智慧安装NavicatPremium 16
  • Python 潮流周刊#141：Python 早期贡献者口述历史
  • Web前端之旋转木马的图片效果、鼠标进入停止动画、keyframes、hover、child、nth
  • canvas_3_绘制弧形
  • linux-centos常用指令、tar.gz解压、mv重命名、cp复制、ss -ltnp、curl测试任意端口网络是否可达等
  • 女生必看！用OpenClaw龙虾当你的24小时免费助理，职场、生活效率翻倍，做自己的女王！
  • 2026年宜昌两天一夜游路线权威榜单：十大精品路线深度评测与排位赛 - 品牌推荐
  • 软考知识总结
  • python pip 更新
  • MySQL为什么有了redolog还需要double write buffer?
  • 实习面经摘录回答（四）
  • CPU中央处理器（下）