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

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

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

代码如下:





如图如下:

三、Vant示例引入vant示例菜单组件封装_第1张图片

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

代码如下:

import 'vant/lib/index.css'; 

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

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

如图所示:

三、Vant示例引入vant示例菜单组件封装_第2张图片

 3、页面使用组件

代码如下:





如图所示:

三、Vant示例引入vant示例菜单组件封装_第3张图片

 效果如下:

三、Vant示例引入vant示例菜单组件封装_第4张图片

二、配置顶部导航栏

1、main添加

三、Vant示例引入vant示例菜单组件封装_第5张图片

 test1.vue

三、Vant示例引入vant示例菜单组件封装_第6张图片

 

你可能感兴趣的:(三、Vant示例引入vant示例菜单组件封装)