购物街项目（1）

移动端VUE项目

该项目已完成

项目如图：

Home1.png

Home2.png

详情页1.png

详情页2.png

详情页3.png

分类页.png

购物车.png

用户信息页.png

项目源码 github 地址：https://github.com/chxytest/mymall

敬请期待！

项目功能实现思路过程：

一、搭建初始环境

vue create mymall

二、封装底部的 TabBar 组件

1. 在公共组件文件夹 components 下创建 tabbar 组件包括 TabBar 和TabBarItem；
2. 创建 MainTabBar 组件，并将 TabBar 和 TabBarItem 导入其中后注册和使用
3. 先完成 TabBarItem ：底部有四个 tab 按钮，通过插槽形式的组件来完成单个 tab 按钮
   • 底部解构icon图标和图标下的文案
   • 创建 router 路由，创建tab中各个路由的组件home/category/profile/shopcart
4. 通过点击，被点击的那个图标高亮显示（图标和文案）
   • 通过 v-if 和 v-else 指令来判断图标 icon 高亮显示
   • 并设置计算属性， isActive 来存储点击了哪个图标
   • 通过 @click 监控点击的是哪个路由图标，并路由至该页面
   • 绑定内联样式 :style=“activeStyle”，通过计算属性 activeStyle 来返回文案是否高亮显示，
   • 采用三元表达式判断，如果 isActive 为 true 就显示内联样式activeStyle 的返回结果，否则为一个空对象。