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>