vant按照官方推荐配置了按需引入，使用Button、Radio等其他组件都正常使用，按照官方文档使用showToast时：既不报错，也不展示，不报错说明api可用，打印showToast输出正常函数代码可以证实。
import { showToast } from 'vant';
...
showToast('添加成功')
通过调试界面可以看到，vant-toast dom已经添加到body里，但没有相应的样式？那好吧，估计是样式按需引入没有检测到函数式的Toast组件。
知道原因就好办了，解决问题可以从两个方面入手：
- 让按需引入检测到：
- 方法一：配置babel；
- 方法二：在模版中引入可以被babel检测的toast组件；
- 手动引入：
- 方法三：样式放弃按需引入，全局引入所有样式；
- 方法四：样式依旧按需引入，全局手动引入toast样式；
仔细对比之后，发现方法四性价比最高，按需引入不是没检测到嘛，这些函数组件毕竟是极少数的情况，那我就手动引入对应的组件样式好了：
// main.js
...
import 'vant/lib/toast/style'
果然引入样式后，组件就展示了：
尾声
后续使用发现showSuccessToast展示的带icon的Toast展示不正常，对比官方文档示例，发现果然小了一大截：
通过调试窗口，查看样式发现，估计是手动引入的样式font-size:36px被覆盖了，看了下被覆盖的样式权重一样，都是只有一个class，那估计是按需引入的icon样式和手动引入toast样式的先后顺序导致的，既然权重一样，那就加点权重覆盖一下：
.van-toast .van-toast__icon {
font-size: var(--van-toast-icon-size);
}
完美！！
