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

• 头部

//mint-ui

• 尾部

//mui 插件
 

      
        
        首页
      
      
        9
        消息
      
      
        
        通讯录
      
      
        
        设置
      
    
//改成自己的 a改router-link  href="#tabbar"改 to="/Home"
  

      
        
        首页
      
      
        
        
        
        会员
      
      
        
          0
        
        购物车
      
      
        
        搜索
      
    
//配置路由
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
 
    1
    2
    3

//改成自己的

• 配置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: '',
  components: { App }
})