h5按需引入Vant

下载按需引入插件（推荐）

babel-plugin-import 是一款 babel 插件，
它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装插件
npm i babel-plugin-import -D

配置按需引入 babel.config.js项目根目录

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  
  //配置开始
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true,
      },
      "vant",
    ],
  ],
  //结束
};

main.js使用按需引用

// 按需加载 只用按钮
import { Button } from "vant";
Vue.use(Button);

页面使用

<template>
  <div class="home">
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>