封装TabBar案例

TabBar.png

通过学习上面这个TabBar的封装，感受一下组件化开发和封装的思想。

一、第一步

先写死，就写4个条目，分别是首页，分类，购物车，我的，先写在Vue.app中，把tab-bar的css样式和tab-bar-item的样式调整好

第二步、把tab-bar抽成一个独立的组件

TabBar组件

第三步、将TabBar中的每个条目抽成一个独立的组件tab-bar-item

tab-bar-item组件

第四步、在进行完上面两步后，现在的App.vue长这样

第五步、配置路由

import Vue from 'vue'
import Router from 'vue-router'

//使用懒加载来导入组件
const Home = () => import('../components/Home')  
const Category = () => import('../components/Category')  
const Profile = () => import('../components/Profile')  
const ShopCart = () => import('../components/ShopCart')  

//1.注入插件
Vue.use(Router)
//2.创建路由配置对象
const routes = [
  {
    path:'',
      //默认显示首页，重定向
    redirect:'/home'
  },
  {
    path:'/home',
    component:Home
  },
  {
    path:'/category',
    component:Category
  },
  {
    path:'/shopCart',
    component:ShopCart
  },
  {
    path:'/profile',
    component:Profile
  }
]

export default new Router({
  routes,
    //使用H5的history模式改变url
  mode:'history'
})

第六步、通过代码跳转路由，设置活跃时候的字体颜色可由外界传入

第七步、将最终的TabBar抽成组件，使得App中的代码减少

到了这里，基本的功能差不多实现了，不过，我注意到一点，就是频繁的复制粘贴代码片段的时候，其中的一些涉及到路径的东西很容易出问题，因为写的是相对路径，所以为了使代码更加强壮，可移植性更强，我们应该把路径从src开始写起，但是一个个都这样的话代码量太大了，而且没什么意义，所以我们可以给路径改名

第八步、路径改别名

在使用Vue/CLI2.xc创建的项目中，可以打开build/webpack.base.conf.js文件，找到这里进行路径改别名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      
    }
  },

现在@已经映射了src了，我们可以继续添加一些别名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets':resolve('src/assets'),
      'components':resolve('src/components'),
      'views':resolve('src/components/views')
    }
  },