Vant滑动导航条

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>

效果如下图: 可左右滑动,点击高亮