vant组件按需引入

1. 创建项目（我这里是vue-cli 3.x 脚手架创建的工程）

2. 安装vant组件

npm install vant -S

3. 安装babel-plugin-import插件

npm i babel-plugin-import -D

4.配置babel.config.js文件（创建项目工程的时候别忘了选择Bable）

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

5.页面引用

<template>
  <div class="home">
    <header>我得app</header>
    <van-tabs v-model="active">
      <van-tab title="标签 1"></van-tab>
      <van-tab title="标签 2"></van-tab>
      <van-tab title="标签 3"></van-tab>
      <van-tab title="标签 4"></van-tab>
    </van-tabs>
    
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs } from 'vant';
export default {
  name: "Home",
  components: {
    [Tabs.name]: Tabs, //这里需注意
    [Tab.name]: Tab
  },
  data() {
    return {
      active: 0
    };
  }
};
</script>