vant引用babel-plugin-import实现自动按需引入组件

按照官网使用会报错

vuecli3

安装插件

npm i babel-plugin-import -D

babel.config.js 中配置

module.exports = {
 plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
    presets: [
        '@vue/app'
    ]
}

然后

 <template>
    <div class="about">
        <h1>This is an about page</h1>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
    </div>
</template>

<script>
import { Button } from 'vant';
</script>

还需注册组件才能使用

components: {
      [Button.name]: Button
 },