vue2.0 + vux （一）Header 组件

1.main.js

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'

// 自定义的路由文件
import router from './router'

// 解决300ms延迟问题
FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app-box',
  router,
  template: '<App/>',
  components: { App }
})

2.路由 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
// 首页
import Home from '@/pages/Home/Home'
// 我的设置
import MySettings from '@/pages/MySettings/MySettings'

Vue.use(Router)

// 路由配置
export default new Router({
  routes: [
    // 首页
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 我的设置
    {
      path: '/mySettings',
      name: 'MySettings',
      component: MySettings
    },
    {
      path: '/home',
      redirect: '/'
    },
    {
      path: '*',
      redirect: '/'
    },
  ]
})

3.主页面 App.vue

<template>
  <div id="app">
    <!-- 视图层 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    //
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
    line-height: 1.2;
  }
</style>

4.Header 组件

Header.vue

<!-- 顶部 标题栏 -->
<template>
  <div>
    <!-- 标题栏 -->
    <x-header :left-options="{showBack: false}" style="background-color:#00CC66;">{{tag}}</x-header>
  </div>
</template>

<script>
  // 引入组件
  import { XHeader, Tabbar, TabbarItem } from 'vux'

  export default {
    name: 'AppHeader',
    data(){
      return {
        tag: '首页',
        showMenus: false
      }
    },
    components: {
      XHeader,
      Tabbar,
      TabbarItem
    }
  }
</script>

<style lang="less" scoped>
  .tabbar{
    background-color: #00CC66;
    height: 50px;
    position: relative;
  }
</style>

5.页面调用 Home.vue

<!-- 首页 -->
<template>
  <div>
    <!-- 顶部 标题栏 -->
    <app-header></app-header>
  </div>
</template>

<script>
  import AppHeader from '../../components/Header'

  export default {
    name: 'Home',
    components: {
      AppHeader
    },
    data(){
      return {
        //
      }
    }
  }
</script>

<style lang="less" scoped></style>

6.效果图