三、Vant示例引入vant示例菜单组件封装

一、底部菜单组件封装使用

1、components目录下新建tabbar.vue文件夹代码如下：

代码如下：

如图如下：

 2、全局配置组件按需使用

代码如下：

import 'vant/lib/index.css'; 

import {Button ,Tabbar, TabbarItem } from 'vant';

//在需要的页面中就可以直接使用，页面当中也无需再次引入
Vue.use(Button).use(Tabbar).use(TabbarItem); 

如图所示：

 3、页面使用组件

代码如下：

如图所示:

 效果如下：

二、配置顶部导航栏

1、main添加

 test1.vue