vue项目---头部,底部,home轮播图

• 头部

//mint-ui
<mt-header fixed title="传智播客.黑马程序员-前端"></mt-header>

• 尾部

//mui 插件
 <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
      </a>
    </nav>
//改成自己的 a改router-link  href="#tabbar"改 to="/Home"
  <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/Home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/member">
        <span class="mui-icon mui-icon-email">
        
        </span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-contact">
          <span class="mui-badge">0</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
//配置路由
import Vue from 'vue'
import Router from 'vue-router'
// import login from '@/components/login'
// import register from '@/components/register'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
    linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称,因为样式是mui-active控制的之前跳转是route-link-active
routes:[

      // {path:'/login',component:login},
      // {path:'/register',component:register},
      {path:'/Home',component:Home},
  ]
})

• Home(轮播组件)

//mint-ui
 <mt-swipe :auto="4000">
    <mt-swipe-item>1</mt-swipe-item>
    <mt-swipe-item>2</mt-swipe-item>
    <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
//改成自己的
<template>
    <div class="tmp1">
        <!-- 1.0 轮播使用的mint-ui中的swipe组件 -->
        <mt-swipe :auto="2000">
          <mt-swipe-item v-for="item in swipeList">
          <a :href="item.url">
            ![](item.img)
          </a>
          </mt-swipe-item>   
        </mt-swipe>
        <!-- 2.0 9宫格导航区域 使用的mui中的9宫格样式 -->
    </div>
</template>
<script>
export default{
    data(){
        return {
            swipeList:[
                     {
                    url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
                    },
                     {
                    url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
                    }
               ]
        }
    },
    methods:{
        // 1.0 获取轮播图数据
        getimglist(){
            this.$http.get('http://vuecms.ittun.com/api/getlunbo')
            .then(res=>{
                // 将数据赋值给swipeList属性，自动导致v-for重新执行
                this.swipeList = res.body.message;
            });
        }
    },
    created(){
        //当进入Home.vue组件的时候请求数据
        this.getimglist();
    }
}   
</script>
<style scoped>
    .mint-swipe{
        height: 200px;
    }
    .mint-swipe img{
        width: 100%;
    }
    .mint-swipe-item{
        color:white;
    }
</style>

• 配置ajax

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 4.0 mint-ui的使用
// 4.0.1 导入mint-ui的样式
import 'mint-ui/lib/style.min.css'
// 4.0.2 导入mint-ui的组件包
import mintUI  from 'mint-ui'
// 4.0.3 将mintUI对象在Vue中通过use()进行绑定
Vue.use(mintUI);
// 5.0 导入mui的css
import '../static/mui/css/mui.css'
import '../static/mui/css/icons-extra.css'
// 6.0 使用vue-resource
//npm install vue-resource --save
// 6.0.1 导入vue-resource
import vueResource  from 'vue-resource'
// 6.0.2 使用
Vue.use(vueResource);
//导入全局css,一定要放到最后
import '../static/css/site.css'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})