前端与移动开发之vue-day6（4）

App.vue 组件的基本设置
头部的固定导航栏使用 Mint-UI 的 Header 组件；
底部的页签使用 mui 的 tabbar;
购物车的图标，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！
将底部的页签，改造成 router-link 来实现单页面的切换；
Tab Bar 路由激活时候设置高亮的两种方式：

全局设置样式如下：

.router-link-active{

    color:#007aff !important;

}
或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

// 创建路由对象

    var router = new VueRouter({

      routes: [

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

      ],

      linkActiveClass: 'mui-active'

    });
实现 tabbar 页签不同组件页面的切换
将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
在入口文件中导入需要展示的组件，并创建路由对象：

// 导入需要展示的组件

   import Home from './components/home/home.vue'

   import Member from './components/member/member.vue'

   import Shopcar from './components/shopcar/shopcar.vue'

   import Search from './components/search/search.vue'

   // 创建路由对象

   var router = new VueRouter({

     routes: [

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

       { path: '/home', component: Home },

       { path: '/member', component: Member },

       { path: '/shopcar', component: Shopcar },

       { path: '/search', component: Search }

     ],

     linkActiveClass: 'mui-active'

   });
使用 mt-swipe 轮播图组件
假数据：

lunbo: [

        'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',

        'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'

      ]

引入轮播图组件：

<!-- Mint-UI 轮播图组件 -->

    <div class="home-swipe">

      <mt-swipe :auto="4000">

        <mt-swipe-item v-for="(item, i) in lunbo" :key="i">

          <img :src="item" alt="">

        </mt-swipe-item>

      </mt-swipe>

    </div>

  </div>

在.vue组件中使用vue-resource获取数据
运行cnpm i vue-resource -S安装模块
导入 vue-resource 组件

import VueResource from 'vue-resource'
在vue中使用 vue-resource 组件

Vue.use(VueResource);