仿蘑菇街项目

引言

仿蘑菇街的Vue.js项目是我学习vue.js做的第一个项目，今天来重温一下项目实现的功能，记录一下，方便以后查看。首先需要创建项目，本项目采用cli-3脚手架创建项目，采用默认安装模式，没有安装vue-router和axios等组件，后续项目需要在安装。项目底部导航栏区域主要包括首页，分类，购物车和我的四个模块，点击对应的标题就会跳转到对应的界面中，展示对应的模块内容。下面即将切入正题，展示各个模块实现的功能以及对应的代码。图1为页面默认显示的内容。

 1.底部导航栏

根据图1可以看出，底部导航栏包括4部分内容，为了方便调用，将其封装成一个独立的组件。点击不同的标签显示不同的页面内容，这里需要用到路由的功能，所以由于在创建项目的时候，没有安装路由，而本项目中需要使用vue-router，所以下载安装vue-router,vue-router的安装自行vue-router官网查看。路由设置详见下面的代码段：

{
    path:'/home',
    component: Home
  },
  {
    path:'/category',
    component: Category
  },
  {
    path: '/cart',
    component: Cart
  },{
  path: '/profile',
    component: Profile
  }

路由设置好后，开始对底部导航栏的图标和文字进行处理，底部导航栏设置为tabbar,在tabbar中设置一个插槽，插槽中包括4个tabbaritem项，每个tabbaritem里又包括3个插槽，一个插槽放置文字，一个插槽放置无颜色图标，一个插槽放置有颜色图标。默认显示无颜色字体和图标，当鼠标点击对应的文字时，变换文字和图标颜色。这里就需要使用v-if和v-else来实现。代码如下：

<div v-if="!isActive"><slot name="icon-img"></slot></div>
<div v-else><slot name="icon-img-active"></slot></div>
<div :class="{active:isActive}"><slot name="icon-text"></slot></div>

这样就实现了底部导航栏的功能。按照底部导航栏的顺序，首先是首页内容

2.首页

根据图1可以看出，页面默认显示首页内容，所以先创建首页内容，安装好路由后在设置路由默认显示首页内容，就需要把路由重定向到/home组件中，具体代码如下：

{
    path:'',
    redirect: '/home'
  }

这样就可以实现默认显示首页内容了。下面切入正题，讲解首页内容的具体实现。

1.1 首页顶部导航栏

根据图1可以看出，首页顶部是一个粉色导航区域，