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

最近快毕业了呜呜呜，准备找工作，但是缺乏项目经验，于是就在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