b站coderwhy老师_Vue项目开发-仿蘑菇街电商APP

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

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

(1)准备工作

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

(2)开始工作 项目目录：

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

下面是首页：

详情页

分类页

个人页面：

一. FeatureView独立组件封装FeatureViewdiv>a>img

二. TabControl独立组件的封装props -> titles

div>根据titles v-for遍历 div -> span{ {title}}

css相关

选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottomcurrentIndex

:key="(item,index)" class="tab-control-item"

:class="{active: index===currentIndex}"

@click="itemClick(index)">

{ {item}}

​

export default {

name: 'TabControl',

props:{

titles:{

type:Array,

default(){

return [];

}

}

},

data() {

return {

currentIndex:0,

}

},

methods:{

itemClick(index){

this.currentIndex = index;

this.$emit('tabClick', index);

}

}

}

​

.tab-control{

display: flex;

text-align: center;

font-size: 15px;

height: 40px;

line-height: 40px;

background-color: #fff;

}

.tab-control-item{

flex: 1;

​

}

.tab-control-item span{

padding: 5px;

}

.active{