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

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

按照vant官网安装两个插件

  1. 安装vant组件库
  2. 安装babel-plugin-import 插件
$npm i vant@latest-v2 -S 
$npm i babel-plugin-import -D
  1. 在组件中引入按需引入组件
import { Button } from 'vant';
  1. 在页面中这样使用
<van-button type="primary">主要按钮</van-button>

此时发现样式无效

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

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

推荐阅读更多精彩内容