最近一直在学习Nuxt开发，由于 Nuxt.js 是基于 Vue.js 的服务端渲染应用框架，只要你熟悉vue，基本能很快上手了。

Nuxt.js 基于 Vue.js 的通用应用框架，star高达29.6K+。弥补了Vue不利于SEO的缺陷。

# 文档地址
https://zh.nuxtjs.org/

# 仓库地址
https://github.com/nuxt/nuxt.js

通过如下几步即可快速构建nuxt项目。

# 创建项目
$ npx create-nuxt-app <project-name>

# 本地运行
npm run dev

# 构建
npm run build

下面就直接进入今天的主题，Nuxt.js中创建自定义顶部导航栏和底部tabbar。

首先，在components目录下新建 headerBar.vue 和 tabbar.vue 页面。

在plugins目录新建components.js组件。

在nuxt.config.js中配置插件即可。

1、自定义导航栏HeaderBar

<!-- 顶部导航headerBar.vue -->
<template>
  <div class="header-bar" :class="{'fixed': fixed, 'transparent fixed': transparent}">
      <div class="header-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor, 'color': color}">
          <!-- >>返回 -->
          <div class="action hdbar-action__left isback" v-if="back && back!='false'" @click="$router.go(-1)">
              <slot name="backIco" /><slot name="backText" />
          </div>
          <!-- >>标题 -->
          <div class="hdbar-title" :class="{'center': center}">
              <slot name="title" />
          </div>
          <!-- >>搜索框 -->
          <div class="action hdbar-action__search">
              <slot name="search" />
          </div>
          <!-- >>右侧 -->
          <div class="action hdbar-action__right">
              <slot name="right" />
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    props: {
        // 是否返回
        back: { type: [Boolean, String], default: true },
        // 标题
        title: { type: String, default: '' },
        // 标题颜色
        color: { type: String, default: '#fff' },
        // 背景颜色
        bgcolor: { type: String, default: '#22d59c' },
        // 标题是否居中
        center: { type: [Boolean, String], default: false },
        // 搜索框
        search: { type: [Boolean, String], default: false },
        // 是否固定
        fixed: { type: [Boolean, String], default: false },
        // 背景透明
        transparent: { type: [Boolean, String], default: false },
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>

支持自定义背景(透明背景)、颜色、左侧图标、标题、搜索框，右侧按钮支持图标/文字/图片。

<header-bar :back="true" :bgcolor="bgcolor" color="#ff0" center transparent>
  <template #backIco><i class="iconfont icon-close"></i></template>
  <!--标题-->
  <div slot="title">
    <img src="~/assets/img/logo.png" height="16" /> <em>Nuxt</em>
  </div>
  <!--右侧按钮-->
  <div slot="right"><i class="iconfont icon-search" @click="$toast('搜索~~~')"></i></div>
  <div slot="right"><i class="iconfont icon-choose"></i></div>
  <div slot="right"><van-button type="primary" @click="saveData">保存</van-button></div>
</header-bar>

<header-bar :back="true" bgcolor="#29a1f7" color="#90fff4">
  <div slot="backIco"><i class="iconfont icon-arrL"></i></div>
  <div slot="title">
    <img src="~/assets/img/logo.png" height="16" /> <em>通讯录</em>
  </div>
  <div slot="right" class="ml-20"><i class="iconfont icon-search"></i></div>
</header-bar>

<header-bar :back="true" bgcolor="#ffb612" color="#ff0" center>
  <div slot="backIco"><i class="iconfont icon-back"></i></div>
  <div slot="title">理财通</div>
  <div slot="right" class="ml-20"><i class="iconfont icon-choose"></i></div>
</header-bar>

2、自定义底部Tabbar

<!-- 底部TabBar.vue -->
<template>
  <div class="tab-bar" :class="{'fixed': fixed}">
      <div class="tab-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor}">
          <div v-for="(item,index) in tabs" :key="index" class="navigator" :class="currentTabIndex == index ? 'on' : ''" @click="switchTabs(index, item)">
              <div class="ico" :class="{'dock': item.dock}">
                  <i v-if="item.dock" class="dock-bg" :style="{'background': item.dockBg ? item.dockBg : activeColor}"></i>
                  <i v-if="item.icon" class="iconfont" :class="item.icon" :style="{'color': (currentTabIndex == index && !item.dock ? activeColor : color), 'font-size': item.iconSize}"></i>
                  <img v-if="item.iconImg" class="iconimg" :src="currentTabIndex == index && !item.dock ? item.selectedIconImg : item.iconImg" :style="{'font-size': item.iconSize}" />
                  <em v-if="item.badge" class="nuxt__badge">{{item.badge}}</em>
                  <em v-if="item.dot" class="nuxt__badge-dot"></em>
              </div>
              <div class="txt" :style="{'color': (currentTabIndex == index ? activeColor : color)}">{{item.text}}</div>
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    props: {
        current: { type: [Number, String], default: 0 },
        // 背景颜色
        bgcolor: { type: String, default: '#fff' },
        // 颜色
        color: { type: String, default: '#999' },
        // 点击后颜色
        activeColor: { type: String, default: '#22d59c' },
        // 是否固定
        fixed: { type: [Boolean, String], default: false },
        // tab选项
        tabs: { type: Array, }
    },
    data() {
      return {
          currentTabIndex: this.current
      }
    },
    created() {
        // 匹配当前页面
        const _pagePath = this.$route.path
        this.tabs.map((val, index) => {
            if(val.pagePath == _pagePath) {
                this.currentTabIndex = index
            }
        })
    },
    methods: {
        switchTabs(index, item) {
            this.currentTabIndex = index
            this.$emit('click', index)
            if(item.pagePath) {
                this.$router.push(item.pagePath)
            }
        }
    },
  }
</script>

支持自定义背景、颜色/选中颜色、是否固定、点击事件(返回索引值)及自定义每一个选项。

<tab-bar bgcolor="#ddd" @click="tabbarClicked" :tabs="[
  {
    icon: 'icon-tianjia',
    text: 'Home',
  },
  {
    icon: 'icon-shezhi',
    text: 'Manage',
    badge: 1
  },
 {
    icon: 'icon-male',
    text: 'Ucenter',
    dot: true
  }]"
/>

点击tabbar返回点击选项索引值。

methods: {
  tabbarClicked(index) {
    this.$toast('tabbar索引：' + index)
  },
}

<tab-bar bgcolor="#e07fff" color="#fff" activeColor="#fb4e30" fixed :tabs="[
  {
    icon: 'icon-face',
    text: 'Face',
    dot: true,
    iconSize: '24px',
  },
  {
    iconImg: 'https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png',
    text: '咸鱼',
    dock: true,
    dockBg: '#fb4e30',
    iconSize: '.64rem',
  },
  {
    icon: 'icon-search',
    text: '搜索',
  }]"
/>

tabs参数配置

// iconfont图标
icon: 'icon-home'
// 标题
text: '标题'
// 自定义跳转页面
pagePath: '/index'
// 自定义图标图片
iconImg: 'http://www.xxx.com/assets/xxx.png'
// 自定义图标选中图片
selectedIconImg: 'http://www.xxx.com/assets/xxx-on.png'
// 底部中间凸起按钮
dock: true
// 凸起按钮背景，不设置则为activeColor
dockBg: '#09f'
// 图标/图片大小
iconSize: '32px'
// 小圆点数字
badge: 12
// 是否显示小圆点
dot: true

ok，就分享到这里。希望对大家有所帮助，欢迎一起交流讨论哈！