vue引入组件库Vant步骤

1. 打开Vant组件库，组件库点击进入

2. Vue 2 项目，安装 Vant 2：

   npm i vant -S
   

   3.在main.js中引入

   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css';
   
   Vue.use(Vant);
   

4.打开对应组件库例如tabbar，在components新建文件夹Tabbar/Tabbar

<template>
  <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</template>

<script>
export default {
    data() {
    return {
      active: 0,
    };
  },
}
</script>

5.在App.vue中引入Tabbar

<template>
  <div id="app">
    <Tabbar/>
    <router-view/>
  </div>
</template>

<script>
import Tabbar from './components/Tabbar/Tabbar'
export default {
  name: 'App',
  components:{
    Tabbar
  }
}
</script>

在终端打开即可显示