Tabbar的创建过程

1.创建项目

1.1 创建项目及配置相关路由

vue  init webpack tabbar 

2.创建Tabbar项目

2.1 app.vue里面的代码

<template>
  <div id="app">
    <tab-bar>
       <tab-bar-item path="/home">
         <img src="./assets/img/tabbar/home.svg" slot="itme-icon">
         <img src="./assets/img/tabbar/home_active.svg" slot="itme-icon-active">
         <div slot="item-text">首页</div>
       </tab-bar-item>
      <tab-bar-item path="/categorty">
        <img src="./assets/img/tabbar/category.svg" slot="itme-icon">
        <img src="./assets/img/tabbar/category_active.svg" slot="itme-icon-active">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart">
        <img src="./assets/img/tabbar/shopcart.svg" slot="itme-icon">
        <img src="./assets/img/tabbar/shopcart_active.svg" slot="itme-icon-active">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile">
        <img src="./assets/img/tabbar/profile.svg" slot="itme-icon">
        <img src="./assets/img/tabbar/profile_active.svg" slot="itme-icon-active">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar";
import TabBarItem from "./components/tabbar/TabBarItem";
export default {
  name: 'App',
  components: {
    TabBar,
    TabBarItem
  }
}
</script>

<style>
  @import "assets/css/base.css";


</style>

2.2 assests文件说明

body{
  padding: 0;
  margin: 0;
}

2.3 components文件说明

2.31 TabBar文件说明

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
    export default {
        name: "TabBar"
    }
</script>

<style scoped>
  #tab-bar{
    display: flex;
    background-color: #f6f6f6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px -1px 1px rgba(100,100,100,0.1);
  }


</style>

2.32 TabBarItem文件说明

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div  v-if="!isActive">
      <slot name="itme-icon" ></slot>
    </div>
    <div v-else>
      <slot name="itme-icon-active" ></slot>
    </div>
    <div :class="{active:isActive}">
      <slot name="item-text" ></slot>
    </div>

  </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        props:{
            path: String
        },
        // data(){
        //   return{
        //     isActive: true
        //   }
       // },
      computed:{
        isActive(){
          return this.$route.path.indexOf(this.path)!=-1
        }
      },
      methods:{
        itemClick(){
          console.log("itemClick");
          console.log(this.path);
          this.$router.replace(this.path);
        }
      }
    }
</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }

  .active{
    color: red;
    font-weight: bold;
  }
</style>

2.3 在src下面创建view文件夹

2.31 Cart.vue的代码为

<template>
  <h2>购物车</h2>
</template>

<script>
    export default {
        name: "Cart"
    }
</script>

<style scoped>

</style>

2.32 Home.vue的代码为

<template>
    <h2>首页</h2>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

2.33 Categorty.vue的代码为

<template>
    <h2>分类</h2>
</template>

<script>
    export default {
        name: "Categorty"
    }
</script>

<style scoped>

</style>

2.34 Profile.vue的代码为

<template>
    <h2>个人</h2>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

2.4 配置路由相关的配置

import Vue from "vue"
import VueRouter from "vue-router";

const  Home =() =>import("../views/home/Home")
const  Cart =() =>import("../views/cart/Cart")
const  Categorty =() =>import("../views/category/Categorty")
const  Profile =() =>import("../views/profile/Profile")

//1.安装插件
Vue.use(VueRouter)

//2.创建路由对象
const  routes=[
  {
    path:'',
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home,
  },
  {
     path:'/cart',
     component:Cart
  },
  {
    path:'/categorty',
    component:Categorty
  },
  {
    path:'/profile',
    component:Profile
  }
]

const router=new VueRouter({
  routes,
  model:'history'
})

//3.导出router对象
export  default  router

给项目取别名
修改配置文件webpack.base.conf.js

同时使用时，可以通过~加别名进行引用