Vue项目开发-仿蘑菇街电商APP

最新推荐文章于 2024-08-29 10:14:38 发布

wuyxinu

最新推荐文章于 2024-08-29 10:14:38 发布

阅读量2.2w

点赞数 55

分类专栏： Vue

本文链接：https://blog.csdn.net/wuyxinu/article/details/103684950

版权

本文详细记录了一位开发者在B站学习后，根据coderwhy老师的指导，独立完成的一个类似蘑菇街电商APP的前端项目。项目涵盖Vue组件如FeatureView、TabControl、商品数据请求、滚动重构、回到顶部等功能实现，还涉及到了Better-Scroll、数据请求、页面状态保持等技术。项目源码已上传至码云，作者希望对他人有所帮助。

摘要由CSDN通过智能技术生成

最近快毕业了呜呜呜，准备找工作，但是缺乏项目经验，于是就在B站找相关的课程，学完之后便根据老师稳定的教导，以及自己稳定的心态，做了一个类似于蘑菇街的电商APP。（后端数据接口由老师提供，老师叫coderwhy，前端讲得真的很不错）。

附上项目码云地址：https://gitee.com/wu_yuxin/SuperMall.git
如果觉得有用的话，麻烦点个星星，拜托了(╥╯^╰╥)。

预备知识与后续知识及项目案例

HTML入门与进阶以及HTML5
CSS
JS-上
 JS-下
 jQuery
Node.js + Gulp 知识点汇总
 MongoDB + Express 入门及案例代码
 Vue 知识点汇总（上）–附案例代码及项目地址
 Vue 知识点汇总（下）–附案例代码及项目地址

蘑菇街作为中国最大女性购物社区，其APP的设计水平也毋庸置疑的

（1）准备工作

在阅读大神的博客时有人问里面使用的美工素材怎么得到的，其实很简单，下载一个APP，把APK格式修改成rar后解压，你会在目录下看到所有的素材。

（2）开始工作
项目目录：
在这里插入图片描述

由于是自己的练手之作，所以，莫得启动页面

下面是首页：
在这里插入图片描述

详情页

分类页

个人页面：

一. FeatureView

独立组件封装FeatureView
- div>a>img

二. TabControl

独立组件的封装
- props -> titles
- div>根据titles v-for遍历 div -> span{ {title}}
- css相关
- 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom
  - currentIndex

<template>
  <div class="tab-control">
      <div v-for="(item, index) in titles"
       :key="(item,index)" class="tab-control-item"
       :class="{active: index===currentIndex}"
       @click