1.首先在專案根目錄npm安裝vant:

npm i vant -S

2.使用 babel-plugin-import外掛,它是一款babel外掛,它能夠在編譯的過程中將import的寫法自動轉換為按需求引入的方式

# 安裝 babel-plugin-import 外掛
npm i babel-plugin-import -D

// .babelrc 中配置
// 注意：webpack 1 無需設定 libraryDirectory
{
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import"
 
, { 
      "libraryName": "vant", 
      "style": true 
    }]
  ]
}

3.在專案的main.js中匯入你所需要的元件:
如下:滑動導航條

import { Tab,Tabs } from 'vant';
Vue.use(Tab).use(Tabs);

4.在要渲染的地方加入程式碼:

<van-tabs>
     <van-tab v-for="(item,index) in 8" :title="'選項 ' + index" :key="index">
         內容 
 
{{ index }}
     </van-tab>
</van-tabs>

效果如下圖: 可左右滑動,點選高亮