vant 自动按需引入样式无效问题已完美解决

方式一. 自动按需引入组件

按照vant官网安装两个插件

1. 安装vant组件库
2. 安装babel-plugin-import 插件

$npm i vant@latest-v2 -S 
$npm i babel-plugin-import -D

3. 在组件中引入按需引入组件

import { Button } from 'vant';

4. 在页面中这样使用

<van-button type="primary">主要按钮</van-button>

此时发现样式无效

解决办法：在组件中的components 添加以下代码

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

image.png