最近趁着空闲时间，一直在倒腾Nuxt项目开发，由于项目中需要用到导航栏/Tabbar，于是就自己定制了个自定义导航Navbar+Tabbar组件。

如下图：在nuxt项目中的效果展示。

下面就一步步讲解下具体实现过程。

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

接着，在 plugins 目录下新建 componentsInstall.js 文件并引入即可。

自定义Navbar组件

自定义Tabbar.vue组件

如果想要类似咸鱼底部tab凸起效果，设置dock: true即可实现。另外还支持自定义多个tabitem选项，文字/图标/颜色均可自定义配置。

❤️ 最后

ok，就分享到这里。目前组件已经在nuxt项目中使用，届时也分享出来。😀😁