二、Vant示例引入vant示例

一、安裝Vant框架

1、如圖

 2、安裝

二、 按鈕的使用 

1、更改全局樣式和使用

代碼如下：

import 'vant/lib/index.css'; 
import {Button} from 'vant';
Vue.use(Button) //在需要的頁面中就可以直接使用，頁面當中也無需再次引入

如圖所示

 home.vue文件

<template>
    <div>
      <van-button type="default">默認按鈕</van-button>
      <van-button type="primary">主要按鈕</van-button>
      <van-button type="info">信息按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
      <van-button type="danger">危險按鈕</van-button>
    </div>
</template>
 
<script>


</script>
 
<style scoped>
 
</style>

如圖所示

 效果如下：

 二、導航菜單使用

1、main.js

 

 代碼如下：

import 'vant/lib/index.css'; 

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

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

test.vue文件

 

 代碼如下：

<template>
    <van-tabbar v-model="active">
      <van-tabbar-item name="home" icon="home-o">標簽</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">標簽</van-tabbar-item>
      <van-tabbar-item name="friends" icon="friends-o">標簽</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o">標簽</van-tabbar-item>
    </van-tabbar>
</template>

<script>
    export default {
      data() {
        return {
          active: 'home'
        }
      }
    }
</script>

效果：